js写循环只有最后一个有效

Question

var li = document.querySelectorAll('li');
for (var i = 0 ; i < 11 ; i ++){
        li[i].addEventListener('mouseover', function () {
            li[i].style.backgroundColor = 'white';
            console.log(i);
        });
    }

希望的效果是鼠标经过标签的时候改变颜色
通过addevenlistener添加mouseover实现
但是现在的效果是不管鼠标经过哪个li
consolelog输出的都是11 也就是只有最后一个变颜色

Answer 1

其实写成这样就好了吧：

var li = document.querySelectorAll('li');
for (var i = 0 ; i < 11 ; i ++){
    li[i].onmouseover = function () {
        this.style.backgroundColor = 'white';
    };
}

（虽然知道是闭包题，但是能解决问题不就得了么。。）

Answer 2

var li = document.querySelectorAll('li');
for (var i = 0 ; i < 11 ; i ++){
        li[i].addEventListener('mouseover', (function (i) {
             return function(){ li[i].style.backgroundColor = 'white';
            console.log(i);}
        })(i));
    }

Answer 3

li[i].style.backgroundColor = 'white';

for循环后 i等于最大值了

li[11].style.backgroundColor = 'white';

Answer 4

var li = document.querySelectorAll('li');

for (var i = 0 ; i < 11 ; i ++){

li[i].index=i;
li[i].addEventListener('mouseover', function () {
    li[this.index].style.backgroundColor = 'white';
    console.log(this.index);
});

}

Answer 5

li用array.prototype.slice.call获取，然后用for each 循环

Answer 6

感觉天天都有人在问这个问题，看看这里吧
https://segmentfault.com/a/11...

Answer 7

用闭包，如同楼上

Answer 8

for(var i=0;i<li.length;i++){
    li[i].addEventListener('mouseover', function () {
        for(var i=0;i<li.length;i++){
            li[i].style.backgroundColor='#fff';
        }
       this.style.backgroundColor="red";
    })
}

Answer 9

我看到你这个界面，就知道你在看哪个视频教程。。。

Answer 10

最简单的写法，把for循环中的var改成let即可

Answer 11

为什么要循环？

document.querySelectorAll('li').addEventListener('mouseover', function () {
    this.style.backgroundColor = 'white';
    console.log(this);
})