javascript 中相等的工作原理

Question

我正在制作移动菜单。我想在 中更改课程。第一步有效，它删除了“fa-bars”类并添加了“fa-times”。但是第二步不行。

<div class="menuToggle">
       <i id='test' class="fas fa-bars fa-2x"></i>
    </div>     

        let menuActive = document.querySelectorAll('.menuToggle i')
        var element = document.getElementById('test');

        if(element.classList.contains('fa-bars')){
            function Activemenu(){
                menuActive.forEach((item)  =>
                item.classList.remove('fa-bars'));
                this.classList.add('fa-times');
            } 
        }else if(element.classList.contains('fa-bars')){
            function Activemenu(){
                menuActive.forEach((item)  =>
                item.classList.remove('fa-times'));
                this.classList.add('fa-bars');
            }  
        }
        menuActive.forEach((item) =>
            item.addEventListener('click',Activemenu));

Answer 1

这里有几个问题：

1. 您在 if/else 块中使用函数声明。这些现在在某些有限的情况下（您的代码不匹配）是标准化的，但它足够复杂，您真的只想避免在块中使用函数声明。改为使用分配给变量的函数表达式。

2. 您正在为事件处理程序使用箭头函数，但期望 this 由函数调用方式设置。箭头函数don't work that way。

3. 您在两个classList.contains 检查中检查fa-bars。您可能想要在第二个中使用fa-times。

4. 您只是将第一个事件处理程序绑定到该元素。当条件改变时，不会更新处理程序。

顺便说一句，我建议在 forEach 回调上使用 for-of 循环：

const menuActive = document.querySelectorAll(".menuToggle i");
const element = document.getElementById("test");
function activeMenuClickHandler() {
    if (element.classList.contains("fa-bars")) {
        for (const item of menuActive) {
            item.classList.remove("fa-bars"));
        }
        this.classList.add("fa-times");
    } else if (element.classList.contains("fa-times")) {
        for (const item of menuActive) {
            item.classList.remove("fa-times"));
        )
        this.classList.add("fa-bars");
    }
}
for (const item of menuActive) {
    item.addEventListener("click", activeMenuClickHandler);
}

（或类似的，您可能需要做一些进一步的调整。）

---

如果这段代码只切换fa-bars/fa-times，使用toggle的toggle函数可能更简单：

const menuActive = document.querySelectorAll(".menuToggle i");
const element = document.getElementById("test");
function activeMenuClickHandler() {
    this.classList.toggle("fa-bars fa-times");
    for (const item of menuActive) {
        item.classList.toggle("fa-bars fa-times");
    }
}
for (const item of menuActive) {
    item.addEventListener("click", activeMenuClickHandler);
}