的HTML
<span class="char" id="0">?</span>
<span class="char" id="1">!</span>
<span class="char" id="2">"</span>
<span class="char" id="3">/</span>
<span class="char" id="4">%</span>
<span class="char" id="5">$</span>
...
的JavaScript
var charElems = document.getElementsByClassName('char');
for (var i=0; i < charElems.length; i++) {
charElems[i].addEventListener('mouseover',function() {
(function(j) {mouseoverCheck(j);}(i));
});
}
我有一堆(数百个)
span
元素,其ID为数字(从0开始,以1递增)。此循环应该执行的操作是为所有span
元素(都具有char
类)创建mouseover事件侦听器。一旦将鼠标悬停在它上面,它就应该执行mouseoverCheck()
函数,并传入创建该事件侦听器时的i
。因此,第203个事件侦听器应传入203
。但事实并非如此。现在,它将传入我认为是循环完成之前的最后一个值i
。我试图使用IIFE和闭包以确保每个事件侦听器在创建时都获得
i
的值,而不是调用该函数时的值。显然,我没有正确执行操作,但是我可以肯定的是,关闭是解决问题的关键。任何人都可以阐明如何正确执行此操作吗?我以为我了解闭包,但显然我不知道... 最佳答案
它不起作用,因为
charElems[i].addEventListener('mouseover',function() {
(function(j) {mouseoverCheck(j);}(i));
});
addEventListener()
只是分配一个处理程序,到该处理程序被称为i
时将为6。您应该从IIFE返回处理程序
var charElems = document.getElementsByClassName('char');
for (var i=0; i < charElems.length; i++) {
charElems[i].addEventListener('mouseover', (function(temp) {
return function(){
var j = temp;
//mouseoverCheck(j);
console.log(temp);
}
}(i)));
}
这是一个小提琴:https://jsfiddle.net/qshnfv3q/