Question

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

＆＃13;

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
};

＆＃13;

当我调试它时，它看起来似乎合乎逻辑，但它的表现并不正确。即使调试器说cardClass [i] .style.border =＆＃34; 1px点缀黑色＆＃34;。边框仍在屏幕上保持选中状态。

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

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

2 个答案: