Question

我每天都有一个星期几的网格设置，网格上的每个插槽都是我网站用户的复选框，用于指示可用性。由于这最终是大量的插槽，我希望插槽的背景颜色根据是否被检查而改变，但是由于我不想要添加的大量插槽每个ID的事件监听器。是否可以为类添加一个侦听器并传递单击元素的ID，以便只更改其背景？

Answer 1

您必须使用事件委派来完成此操作，简单示例

document.addEventListener('change', function(e){alert(e.target.id)});

http://jsfiddle.net/mowglisanu/cCFxQ/

Answer 2

假设您的复选框是<td>元素的子节点，您可以使用以下代码：

var checkedList = document.getElementsByClassName('checked');
for(var i = 0; i < checkedList.length; i++) {
    var current = checkedList[i],
        parent = current.parentNode; //it is the td
    if (current.checked) parent.style.backgroundColor = 'color';
}

工作JSFiddle

如果你想让它完全动态，你应该添加一个事件监听器，如Musa所说。

document.addEventListener('change', function(e){
    var current = e.target,
        parent = current.parentNode;
    if (current.checked) parent.style.backgroundColor = 'color';
});

Answer 3

这里有一个应该解决问题的逻辑。我建议使用一些框架“jquery”以便于工作

var checkedList = document.getElementsByClassName('checkboxes');
checkedList.addEventListener('change', function(e){
   var node = e.target;
   if(node.checked){
      node.parentElement.style.background-color='grey';
   }else{
      node.parentElement.style.background-color='white';
   }
});

Answer 4

我使用以下代码来解决您遇到的问题。

<!DOCTYPE html>
<html>
<head>

    <style type="text/css">.lw {
  border: 1px solid red;
   font-size: 60px;
}
tr td{
  border: 1px solid red;
  width: 40px;
  height: 40px;
}</style>


<title>HTML5, CSS3 and JavaScript demo</title>
</head>
<body>
<!-- Start your code here -->
<div>
  <table class="gameboard">
    <tbody>
    <tr>
      <td class="slot" id="One">x</td>
      <td class="slot" id="Two"></td>
      <td class="slot" id="Three"></td>
    </tr>
    <tr>
      <td class="slot" id="Four"></td>
      <td class="slot" id="Five"></td>
      <td class="slot" id="Six"></td>
    </tr>
    <tr>
      <td class="slot" id="Seven"></td>
      <td class="slot" id="Eight"></td>
      <td class="slot" id="Nine"></td>
    </tr>
  </tbody></table> 
</div>  
<div>  
  <p id="titleOf" class="lw">Hello Weaver!</p>
</div>

<!-- End your code here -->

<script>/* Write JavaScript here */
var a = document.getElementById("titleText");
var b = document.getElementById("titleOf");
var c = document.getElementsByClassName("gameboard");
var piece = document.getElementsByClassName('slot');
var Gamelogic = {
    checkFirst:false,
    makeX: function(e){
        for(var i= 0; i< piece.length - 1; i++){
            if(e.path[i]){
                e.path[0].innerText = "X";
                e.path[0].style.backgroundColor = "green" ;
            console.log(e.path);
            console.log(e.path[0]);
            console.log(e.path[i]);
            }
            break;
        }
    }

};
c[0].addEventListener("click", Gamelogic.makeX); // if the table is clicked



</script>
</body>

按类添加事件监听器，在JS中将ID作为参数传递

4 个答案: