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

Posted 2023-02-23

【中文标题】JavaScript - CSS 元素样式不会改变？

【英文标题】：JavaScript - CSS element style won't change?

【发布时间】：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"，边框仍然在屏幕上保持选中状态。

【参考方案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