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

Question

我有一个 for 循环，我在其中使用循环中的局部变量作为 onclick 事件回调的参数。我正在根据我在这些 post 中阅读的内容进行操作：

Javascript - Dynamically assign onclick event in the loop

然而，我看到的问题是 onclick 函数只立即调用一次，然后再也不会调用。我在 post:

中找到了一个潜在的解决方案

除了这个例子似乎只有在 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();

在此fiddle中，正在生成宾果卡。期望的行为是卡片的每个框都有一个 onclick 函数来更改该框的颜色。相反，它们在开始时都是随机颜色，并且 onclick 不起作用。

如有任何帮助，我们将不胜感激！

Answer 1

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

所以，你的onclick函数会变成这样：

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

More examples here

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

Set onclick method for an element in a loop using local variables without having it activate immediately

javascript

events

loops

callback

web