1

我有一个按一天中的时间设置一周中的几天的网格，网格上的每个插槽都是一个复选框，供我的站点用户指示可用性。由于这最终是大量的插槽，我希望插槽的背景颜色根据是否选中而改变，但同样由于插槽数量众多，我不想添加每个 ID 的事件侦听器。是否可以为该类添加一个侦听器并传递单击元素的 ID，以便仅更改其背景？

4

4 回答 4

2

你必须使用事件委托来完成这个，简单的例子

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

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

于 2013-05-26T18:29:16.320 回答
0

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

<!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>
于 2015-01-14T09:02:30.833 回答
0

假设您的复选框是<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';
});
于 2013-05-26T18:30:22.003 回答
0

这是一个可以解决您的问题的逻辑。我会建议使用一些框架“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';
   }
});
于 2013-05-26T18:53:44.133 回答