JavaScript-CSS元素样式不会改变吗？

Question

我正在制作一个扑克程序。 我有一张卡片所在的div网格。 用户可以单击以输入卡，以便图像显示在所选区域中。 每个div都有一个默认的1px黑色虚线边框，当用户单击其中一个边框时，该边框的样式更改为2px的蓝色实线边框。 在该函数中，应该将所有div上的边框更改回默认值，然后单击的边框样式会更改。 问题是，如果用户在其中一个div中输入卡片，然后在仍处于选中状态时再次单击div，则该div将永远保持选中状态。 这是函数：

 var clickCardLocation = function(e){ var target = e.target || e.srcElement; //target element of click var cardClass = document.getElementsByClassName("card"); //creates array of div class="card" elements var SELECTED = "2px solid blue"; var DESELECTED = "1px dotted black"; for (var i = 0; i < cardClass.length; i++){ //loop through all card divs in gui cardClass[i].style.border = DESELECTED; //deselect them } target.style.border = SELECTED; //change border for only clicked div }; 

当我对其进行调试时，从逻辑上看这听起来不错，但是操作不正确。 即使调试器说cardClass [i] .style.border =“ 1px点缀黑色”，边框仍保持在屏幕上。

Answer 1

没有getElementByClassName 。 有getElementsByClassName 。 我不确定调试器将如何到达那里。

Answer 2

我知道问这个问题已经快两年了，但我想我会回答...也许会帮助某个人。

jQuery方法：

$(document).ready(function() { //wait until the document is ready
  $('div.card').click(function() { //listen for click on divs with class 'card'
   $('div.card').each(function() { //for each div with class 'card'
    $(this).removeClass('selected'); //take off the 'selected' class that may be on there from other clicks
   });

   $(this).addClass('selected'); //apply the selected class to only the div that was clicked
  });
 });

“选择的”类带有border: 2px solid blue