使用局部变量为循环中的元素设置onclick方法，而不必立即激活它

Question

我有一个for循环，其中我使用循环中的一个局部变量作为onclick事件回调的参数。我是根据我在这些帖子中读到的内容来做的：

在循环中传递参数onclick

Javascript-在循环中动态分配onclick事件

然而，我看到的问题是onclick函数只调用一次，立即调用，然后再也不会调用。我在这篇文章中找到了一个潜在的解决方案：

是否立即调用Javascript onclick函数(不是在单击时调用(？

除了这个例子似乎只有在onclick函数不带参数的情况下才有效。

所以。我们如何A(在循环中使用局部变量设置onclick，以及B(在单击时正确调用它，而不是第一次调用一次？

这里有一个例子：

https://jsfiddle.net/jq7wbxaz/24/

function generateCard() {
for(var n = 0; n < 5; n++) {
for(var k = 0; k < 5; k++) {
var cell = document.createElement("div");
cell.setAttribute("class", "box");
cell.setAttribute("id", "r"+n+"c"+k);
var letter;
switch(k) {
case 0:
letter = "B";
break;
case 1:
letter = "I";
break;
case 2:
letter = "N";
break;
case 3:
letter = "G";
break;
case 4:
letter = "O";
break;
}
cell.innerHTML = letter + n;
cell.onclick = (function(c) {changeCellColor(c);})(cell);
document.getElementById("card").appendChild(cell);
}
}
} 
function changeCellColor(cell) {
//var cell = getCell(n, k);
console.log("Changing color for cell " + cell.id);
cell.style.backgroundColor = '#'+Math.floor(Math.random()*16777215).toString(16);
}
generateCard();

在这把小提琴中，一张宾果游戏卡正在生成。所需的行为是，卡片的每个盒子都有一个onclick函数，可以更改盒子的颜色。相反，它们一开始都是随机的颜色，onclick不起作用。

任何帮助都将不胜感激！

Answer 1

单击单元格时，您需要在调用的函数中引用this。它指的是细胞的元素。

所以，你的onclick功能将变成这样：

cell.onclick = function() { changeCellColor(this) };

这里有更多的例子