0

我正在尝试使用mouseover事件和querySelectorAll方法更改一个项目，同时将鼠标悬停在另一个项目上。坦率地说，我不知道我的代码有什么问题，有人帮忙吗？

var navBar = document.getElementById('nav');
var navLiAnchor = navBar.querySelectorAll('ul > li > a');
var navIcons = navBar.querySelectorAll('ul > li > span > i');

for (var i = 1; i < navIcons.length; i++) {
    navIcons[i].addEventListener("mouseover", function() {
        if(navIcons[i].style.color == 'gray'){
        navLiAnchor[i].style.color = 'gray';
        } else {
            navLiAnchor[i].style.color = 'lightgray';
        }
    });
}
4

1 回答 1

2

问题很可能是您在 for 循环中添加了一个事件侦听器。通常这被认为是不好的做法，您的情况是一个很好的理由，因为它会导致错误。

请参阅：https ://gomakethings.com/why-you-shouldnt-attach-event-listeners-in-a-for-loop-with-vanilla-javascript/

i 变量不在循环范围内 # 在循环的每次迭代之后，i 变量都会增加 1。该值不会在事件侦听器回调函数的范围内保持不变。它改变。

重构您的代码，以便事件处理程序不引用父范围中的计数器变量。在您的处理程序中，您可以使用this来引用目标元素（您也可以使用Event.target）：

var navBar = document.getElementById('nav');
var navLiAnchor = navBar.querySelectorAll('ul > li > a');
var navIcons = navBar.querySelectorAll('ul > li > span > i');

for (var i = 0; i < navIcons.length; i++) {
    navIcons[i].addEventListener("mouseover", function() {
        var idx = navIcons.indexOf(this);
        if(this.style.color == 'gray'){
            navLiAnchor[idx].style.color = 'gray';
        } else {
            navLiAnchor[idx].style.color = 'lightgray';
        }
    });
}

（另外，正如@SmujMaiku 指出的那样，您可能希望循环从第一个元素 index 开始0。）

于 2019-07-31T23:04:54.583 回答