如何在使用 Vanilla JS 悬停在另一个元素上时更改元素的状态答案

【问题标题】：How to Change The State Of An Element While hovering on Another Element Using Vanilla JS如何在使用 Vanilla JS 悬停在另一个元素上时更改元素的状态
【发布时间】：2019-08-01 07:54:33
【问题描述】：

我正在尝试更改一个项目，同时将鼠标悬停在另一个项目上，使用 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';
        }
    });
}

【问题讨论】：

你试过:hover css吗？
你的意思是从i = 1开始跳过数组中的第一个元素
我的回答解决了 JavaScript 的问题；然而，在仔细观察之后，@NidhinJoseph 正确地指出，只需对您的标记稍作更改，只需 CSS 即可实现相同的目标。

标签： javascript html css hover queryselector

【解决方案1】：

问题很可能是您在 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 指出的那样，您可能希望循环从第一个元素开始，索引0。）

【讨论】：