如何在 Unobtrusive Javascript onclick 赋值中使用变量？

Question

我试图将 onclicks 分配给第一行中的 td，这样点击第一个 TD 输出“1”，点击第二个 TD 输出“2”，等等。

问题是，当我实际点击调用 onclick 时，我总是得到“3”，因为那是 onclick 使用的变量的最后一个值。

有没有办法让每次点击 return 我想要的唯一数字？

window.onload = function() { //Wait for the DOM to load.
    table = document.getElementById('myTable');
      for (i = 0; cell = table.rows[0].cells[i]; i++) {
        console.log(i); // logs 0, 1, 2
        cell.onclick=function(){ console.log(i);} // Want to get 0,1, or 2, but always get 3.
    }
}

<table id=myTable>
    <tr>
        <td>COL1</td>
        <td>COL2</td>
        <td>COL3</td>
    </tr>
    <tr>
        <td>one</td>
        <td>two</td>
        <td>three</td>
    </tr>
    <tr>
        <td>four</td>
        <td>five</td>
        <td>six</td>
    </tr>
</table>

Answer 1

那是因为 i 值正在查找最近的闭包变量，如果没有找到，那么它将是全局的。在您的代码中，它是全局的并且在循环完成之前发生变异。

只需将 i 本身作为块范围变量

for (let i = 0; cell = table.rows[0].cells[i]; i++) {

或者赋值给另一个，在下面的例子中是idx。

<table id=myTable>
  <tr>
    <td>COL1</td>
    <td>COL2</td>
    <td>COL3</td>
  </tr>
  <tr>
    <td>one</td>
    <td>two</td>
    <td>three</td>
  </tr>
  <tr>
    <td>four</td>
    <td>five</td>
    <td>six</td>
  </tr>
</table>

<script>
  window.onload = function() { //Wait for the DOM to load.
    table = document.getElementById('myTable');
    for (i = 0; cell = table.rows[0].cells[i]; i++) {
      console.log(i); // logs 0, 1, 2
      let idx = i;
      cell.onclick = function() {
        console.log(idx);
      } // Want to get 0,1, or 2, but always get 3.
    }
  }
</script>

如何在 Unobtrusive Javascript onclick 赋值中使用变量？

How to use variables in an Unobtrusive Javascript onclick assignment?

javascript

unobtrusive