在循环中传递参数 onclick答案

【问题标题】：Passing parameter onclick, in a loop在循环中传递参数 onclick
【发布时间】：2015-05-27 08:12:24
【问题描述】：

我正在循环中创建输入元素。在单击时，这些按钮应该根据按钮元素的初始创建调用具有特定参数的特定函数。事实上，所有按钮总是使用 LAST 按钮的参数调用函数。

for (var i = 0; i < planets.length; i++){
  var id = planets[i].id;

  var input = document.createElement("input");
  input.type = "button";
  input.className = "worldButton";
  input.value = "Choose this world";
  Input.onclick = function(){
     game.pickWorld(planets, id);
  }
}

每个按钮似乎总是传递planets[planets.length] 的id 而不是planets[i]。 console.log(id) 是正确的。使用onclick、addEventListener或jquery.click都没有关系。

然而整个行星阵列传递成功。

如何让输入正确传递特定迭代的 id？

【问题讨论】：

标签： javascript loops

【解决方案1】：

您需要使用IIFE 并创建一个新的闭包，例如

for (var i = 0; i < planets.length; i++){
  var id = planets[i].id;

  var input = document.createElement("input");
  input.type = "button";
  input.className = "worldButton";
  input.value = "Choose this world";
  
  input.onclick = (function(id, planets){
     return function(){
         game.pickWorld(planets, id);
     }
  })(id,planets);
}

发生的情况是变量planets 和id 对回调函数可见，并且在执行时使用最后一个迭代值。

但是，通过闭包，您有效地创建了一个由 each 回调函数查看和保存的“私有”变量。

【讨论】：

【解决方案2】：

您需要在函数中传递id 和planets 变量，如：

for (var i = 0; i < planets.length; i++){
  var id = planets[i].id;

  var input = document.createElement("input");
  input.type = "button";
  input.className = "worldButton";
  input.value = "Choose this world";
  Input.onclick = (function(pl, id){
     game.pickWorld(pl, id);
  })(planets, id);
}

您可以在article 中了解有关 IIFE 的更多信息。

【讨论】：