Question

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

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

您可以在此article中详细了解IIFE。

在循环中传递参数onclick

2 个答案: