在循环中传递参数onclick

Question

我在循环中创建输入元素.单击时,这些按钮应根据按钮元素的初始创建调用具有特定参数的特定函数.实际上发生的事情是所有按钮总是使用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);
  }
}

每个按钮似乎总是传递行星的id [planets.length]而不是planets[i]. console.log(id)是正确的.它没有问题,如果使用onclick,addEventListener或者jquery.click.

然而,整个行星数组成功传递.

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

Answer 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回调函数可见,并且在执行时,使用最后一个迭代值.

但是,通过闭包,您可以有效地创建每个回调函数看到并保留的"私有"变量.

Answer 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);
}

您可以在本文中阅读有关 IIFE 的更多信息。