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));
});
}
我有一堆(数百个)以数字为ID的span
元素(从0开始,以1递增)。这个循环要做的是为所有的span
元素(它们都有一个char
类)创建mouseover事件侦听器。鼠标移过后,它应该执行mouseoverCheck()
函数,并传入创建该事件侦听器时的i
。因此,203个事件侦听器应该传入203
。但事实并非如此。现在,它传入了我认为是i
在循环完成之前的最后一个值。
我试图使用生命和闭包来确保每个事件侦听器在创建时获得i
的值,而不是在调用函数时获得它的值。显然,我没有做对,但我相当确定闭包是解决我问题的关键。有人能解释一下如何正确地做到这一点吗?我认为我理解了闭包,但很明显我不了解……
发布于 2015-12-23 13:23:38
它不能工作是因为
charElems[i].addEventListener('mouseover',function() {
(function(j) {mouseoverCheck(j);}(i));
});
addEventListener()
只是分配了一个处理程序,在调用该处理程序时,i
将为6。
你应该从生命中返回一个操纵者
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/
发布于 2015-12-23 13:50:29
var charElems = document.getElementsByClassName('char');
for (var i = 0; i < charElems.length; i++) {
//close...
//charElems[i].addEventListener('mouseover',function() {
// (function(j) {mouseoverCheck(j);}(i));
//});
//like this
(function(el, x) {
el.addEventListener("mouseover", function() {
mouseoverCheck(x);
});
})(charElems[i], i)
}
https://stackoverflow.com/questions/34429064
复制相似问题