JS:将 onclick 事件的变量值附加到循环中

Question

我希望 onclick 函数在调用 onclick 函数的实例上记住 for 循环中变量 i 和 j 的值。但是，变量在存储在 onclick 函数中之前会更新。

我正在制作一个井字游戏应用程序，不想手动添加所有 onclick 语句，因为这对于大型项目来说是一种不好的做法。

for (j = 0; j < Columns; j++) {
var col = document.createElement("td")
row.appendChild(col)
col.id = i + "" + j;
col.onclick = function() {
console.log(i, j)
place(i + "" + j)
}    
}

没有错误消息，但我不知道如何保存调用 onclick 函数的实例的变量。调用 onclick 函数时如何保存变量？

Answer 1

您必须通过使用let来限定变量的范围，这样您就可以专门为该迭代限定它的范围。避免声明像i = 0这样的变量，因为这样你就会创建一个全局变量，它不会在'use strict'的情况下工作(抛出错误)。

let Columns = 3
let rows = 3
const table = document.getElementById("table")
for (let i = 0; i < rows; i++) {  
let row = document.createElement("tr");
row.textContent = "row " + i;
table.appendChild(row)
for (let j = 0; j < Columns; j++) {
var col = document.createElement("td")
row.appendChild(col)
col.id = i + "" + j;
col.onclick = function() {
console.clear()
console.log(i, j)
}    
}
}

tr, td{
border: 1px solid;
min-height: 60px;
min-width: 60px;  
}

<table id="table"></table>

如果你不能使用let(可能是因为它是 ES6)，你可以使用通用var，但随后你需要bind函数上的值，如下面的代码所示：

var Columns = 3
var rows = 3
var table = document.getElementById("table")
for (var i = 0; i < rows; i++) {  
var row = document.createElement("tr");
row.textContent = "row " + i;
table.appendChild(row)
for (var j = 0; j < Columns; j++) {
var col = document.createElement("td")
row.appendChild(col)
col.id = i + "" + j;
col.onclick = function(rowI, colJ) {
console.clear()
console.log(rowI, colJ)
}.bind(this, i, j) //bind parameters -> this is the context
}
}

tr, td{
border: 1px solid;
min-height: 60px;
min-width: 60px;  
}

<table id="table"></table>