Question

这感觉就像一个非常基本的问题，但我似乎无法找到答案。我有一系列具有id＆＃39; s＆＃34; texture-1＆＃34;，＆＃34; texture-2＆＃34; textureInput数组包含那些rects的getElementById，它们在click上调用changeTexture（）函数。我想＆＃34; 1＆＃34;当＆＃34; texture-1＆＃34;传递到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)}
};

它是否传递当时的＆＃34; i＆＃34;在事件时间 - 在循环外部未定义？

Answer 1

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

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

Answer 2

使用闭包。一种简单的方法是在循环中围绕代码包装IIFE

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

将值传递给循环中的事件侦听器的设置不起作用

2 个答案: