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