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

【问题标题】：JavaScript - CSS element style won't change?JavaScript - CSS 元素样式不会改变？
【发布时间】：2016-05-21 08:13:45
【问题描述】：

我正在制作一个扑克程序。我有一个网格用于卡片的去向。用户可以点击输入卡片，使图像出现在选定区域。每个 div 都有一个默认的 1px 虚线黑色边框，当用户单击其中一个时，边框将样式更改为 2px 纯蓝色边框。在该函数中，所有 div 的边框都应该恢复为默认值，然后边框样式会更改为单击的那个。问题是，如果用户在其中一个 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 dotted black"，边框仍然在屏幕上保持选中状态。

【问题讨论】：

标签： javascript html css

【解决方案1】：

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

【讨论】：

那是我的错。我有点搞砸了。我会编辑它。

【解决方案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
  });
 });

'selected' 类有border: 2px solid blue

【讨论】：