javascript - 在循环中将传入的值设置为事件监听器不起作用

Question

这感觉像是一个非常基本的问题，但我似乎找不到答案。我有一个可点击的 svg 矩形数组，其中包含 id 的“texture-1”、“texture-2”等。textureInput 数组保存这些矩形的 getElementById，在单击时调用 changeTexture() 函数。我希望当单击“texture-1”等时将“1”传递到changeTexture()函数中。

手动分配这些值是有效的:例如

  textureInput[0].addEventListener('click', function(){changeTexture("0")}, false);
  textureInput[1].addEventListener('click', function(){changeTexture("1")}, false);

但是在循环中做同样的事情不会:

for (var i=0; i<maxTextures; i++){
   textureInput[i].addEventListener('click', function(){changeTexture(i)}
};

它是否在事件时传入“i”的当前值 - 该值在循环外未定义？

Answer 1

您需要创建一个闭包，以便创建 i 变量的新副本，否则它将使用属于 for 循环的副本。试试这个:

for (var i=0; i<maxTextures; i++){
  textureInput[i].addEventListener('click', (function(i) {
    return function () {
      changeTexture(i);
    };
  })(i));
};