Question

研发员！

我正在学习javascript，现在我正在搞乱eventlisteners。

但是我有一个问题，当我在一个循环中创建eventlisteners时，我无法弄清楚如何传递一个持续存在的变量。我制作了一个脚本，当我点击它时，它会将元素移动到指定的位置。但是现在它把所有元素放在同一个位置，所以出于某种原因，它们都得到了相同的数字。

无论我是否将其传递出去：

var index = i;    

applications[i].addEventListener('click', function(){ 


var posLeft2 = 10*index+"%";

 var iconstyleO =  " text-align: center; "+
" font: bold 22px Tahoma; "+
" position:fixed; "+
" top: 67%; "+
" left: "+posLeft2+"; "+
" display:block; "+
" margin: 150px auto; "+
" color: #ffffff; "+
" z-index: 3; "+
" -webkit-border-radius: 10px; "+
" background: rgb(140,140,140); "+
" width: 10%; "+
" height: 10%; ";

this.setAttribute('style',iconstyleO); 
     }  ,false);

或者像这样：

var index = i;    

applications[i].addEventListener('click', function(index){ 


var posLeft2 = 10*index+"%";

 var iconstyleO =  " text-align: center; "+
" font: bold 22px Tahoma; "+
" position:fixed; "+
" top: 67%; "+
" left: "+posLeft2+"; "+
" display:block; "+
" margin: 150px auto; "+
" color: #ffffff; "+
" z-index: 3; "+
" -webkit-border-radius: 10px; "+
" background: rgb(140,140,140); "+
" width: 10%; "+
" height: 10%; ";

this.setAttribute('style',iconstyleO); 
     }  ,false);

他们仍然将eventlisteners设置为相同的位置。在最后一个元素位置，或在第一个元素位置，取决于我如何尝试传递它。

有什么想法吗？

Answer 1

Javascript没有块范围因此，所有回调都共享相同的变量。

要解决此问题，您需要将代码包装在IIFE中，以便每个回调都有自己的闭包：

(function(index) {
    applications[i].addEventListener('click', function(){ 
        ...
    });
})(i);

Javascript addEventListener：使变量保持不变

1 个答案: