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

Question

我试图将onclicks分配给第一行中的td，这样点击第一个td就会输出"1〃；，点击第二TD输出"；2〃；，等

问题是，当我真正点击调用onclick时，我总是会得到"3〃；，因为这是onclick使用的变量的最后一个值。

有没有办法让每次点击都返回我想要的唯一号码？

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>