Question

我试图在每个单元格上创建一个具有单击功能的游戏板，但每次单击一个单元格时，唯一受影响的是最后一个单元格。我将不胜感激。继承了我的代码：

var board = document.getElementById("board");
var NUM_ROWS = 6;
var NUM_COLS = 6;
for (row = 0; row < NUM_ROWS; row++) {
  var tr = document.createElement("tr");
  for (col = 0; col < NUM_COLS; col++) {
    var td = document.createElement("td");
    var img = document.createElement("img");
    img.src = 'images/image0.png';
    td.appendChild(img);
    td.addEventListener("click", function() {
      img.src = 'images/image1.png';
    });
    tr.appendChild(td);
  }
  board.appendChild(tr);

}

Answer 1

首先需要使用img指出document.body.childNodes[0];孩子。

 td.addEventListener("click", function() {
      var img = this.childNodes[0];
      img.src = 'images/image1.png';//use this not img
    });

<强>解决方案：

var board = document.getElementById("board");
var NUM_ROWS = 6;
var NUM_COLS = 6;
for (row = 0; row < NUM_ROWS; row++) {
  var tr = document.createElement("tr");
  for (col = 0; col < NUM_COLS; col++) {
    var td = document.createElement("td");
    var img = document.createElement("img");
    img.src = 'images/image0.png';
    td.appendChild(img);
    td.addEventListener("click", function() {
      var img = this.childNodes[0];
      console.log('Source Before Clicking');
      console.log(img.src);
      img.src = 'images/image1.png';//use this not img
      console.log('Source Afer Clicking');
      console.log(img.src);
    });
    tr.appendChild(td);
  }
  board.appendChild(tr);

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="board">

</div>

点击事件的Javascript表格单元格？

1 个答案: