Question

假设我有一个看起来像这样的网格（单元格中的数字仅用于标记，它可能只是空单元格）：

用HTML编写，如下所示：

<table>
      <tr>
        <td>0 </td>
        <td>1 </td>
      </tr>
      <tr>
        <td>2 </td>
        <td>3 </td>
      </tr>
</table>

我想做两件事：

添加一些JavaScript代码，以在单击每个单元格时将单元格的编号记录到控制台。这是我的操作方式：

const cells = document.querySelectorAll('td');
for (var i = 0; i < cells.length; i++) {
  cells[i].addEventListener('click', function () {
    console.log(i);
  });
}

但是，无论我单击表在何处，控制台始终返回值4。我的问题是：

通过在for循环的每次迭代中添加cell [i] .addEventListener，是否为每个单元格添加了事件监听器？
即使单击单元格[0]，单元格[\ 1]，单元格[2]或单元格[3]，为什么控制台总是返回4？
我该怎么做才能使控制台返回数组单元格中的所需位置，即如果单击单元格[0]，则返回0；如果单击单元格[\ 1]，则返回1；如果单击单元格[2]，则返回2。 ]，如果我单击单元格[3]，则返回3？

下一步

我想做的第二件事是根据我从HTML设置的颜色选择器中选择的颜色来更改每个单元格的颜色：<input type="color" id="colorPicker">

这是我的做法：

const cells = document.querySelectorAll('td');
for (var i = 0; i < cells.length; i++) {
  cells[i].addEventListener('click', function () {    
    const color = document.querySelector('#colorPicker').value;
    cells[i].style.backgroundColor = color;
  });
}

但是细胞的颜色没有改变。

我不打算使用jQuery，我只想使用向每个单元格添加事件侦听器的基本JavaScript。我已经尝试了数小时的出路，但最终还是一无所知。有人可以帮忙吗？非常感谢，谢谢！

Answer 1

是因为您在回调中使用了“ i”变量。而且“ i”在循环的末尾具有值：4，因此，当您单击回调时，您的应用程序将使用最后一个值。

只需通过以下方式更改代码：

const cells = document.querySelectorAll('td');
for (var i = 0; i < cells.length; i++) {
  console.log(cells[i].innerText);
  cells[i].addEventListener('click', (event) => {
    console.log(event.target.innerText); // Take the text node from the element who fire the click event.

    // If you don't want to use innerText, you can do like this.
        console.log(
           //We transform querySelectorAll to traversable array. Then we find index of current event target.
           Array.from(document.querySelectorAll('td')).findIndex(e => e === event.target)
        );

  });
}

第二种情况是基于colorPicker的：

const cells = document.querySelectorAll('td');
for (var i = 0; i < cells.length; i++) {
  cells[i].addEventListener('click', function (event) {    
    const color = document.querySelector('#colorPicker').value;
    event.target.style.backgroundColor = color;
  });
}

live sample

Answer 2

由于我正在递增，所以在for循环完成之后，我== cells.length。

代替...

for (var i = 0; i < cells.length; i++) {
  cells[i].addEventListener('click', function () {
    console.log(i);
  });
}

使用...

for (var i = 0; i < cells.length; i++) {
  cells[i].addEventListener('click', function (e) {
    console.log(e.target);
  });
}

与您后面的示例相同...

如何将事件侦听器添加到表中的每个单元格？

2 个答案: