javascript - 如何使用 Vanilla JS 在将鼠标悬停在另一个元素上时更改元素的状态

Question

我正在尝试使用 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';
        }
    });
}

Answer 1

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

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

The i variable isn’t scoped to the loop # After each iteration of the loop, the i variable increases by 1. The value does not remain constant within the scope of your event listener callback function. It changes.

重构您的代码，使事件处理程序不引用父作用域中的计数器变量。在您的处理程序中，您可以使用 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 所指出的，您可能希望循环从第一个元素开始，索引 0。)