Javascript 在forEach循环中使用带有参数的函数

为了使我的代码更简洁，我决定采用我经常使用的if/else语句，并将其转换为函数。我尝试将此函数应用于forEach循环，但是，我得到一个错误，即函数的参数未定义

代码如下：

var addClass = (className) => {
    (this.classList.contains(className) === true)
        ? this.classList.remove('active') & this.classList.add(className)
        : this.classList.add(className);
}

exploreStory_buttons.forEach(el => el.addEventListener('mouseover'), addClass(active));

---

如果能洞察到我做错了什么，我们将不胜感激。与往常一样，我觉得解决方案可能很简单：我只是没有看到它。

您希望在适当的上下文中调用函数。为此，有

函数#call

。您还需要使用普通函数，因为“胖箭头”函数以不同的方式处理

var addClass = function (className) {
    if (this.classList.contains(className)) {
        this.classList.remove('active');
        this.classList.add(className);
    } else {
        this.classList.add(className);
    }
}

exploreStory_buttons.forEach(el => {
    el.addEventListener('mouseover'); // where is the event listener??
    addClass.call(this, active);   // N.B. active is undefined here. Do you mean "active"?
});

您也不希望滥用语言功能来编写“智能”代码。对多个语句使用if/else和多行，您不是代码混淆器


假设您希望添加“悬停”行为，代码将如下所示：

function addClass(className) {
    return function () {
        this.classList.add(className);
    }
}
function removeClass(className) {
    return function () {
        this.classList.remove(className);
    }
}

var activate = addClass('active');
var deactivate = removeClass('active');

exploreStory_buttons.forEach(el => {
    el.addEventListener('mouseenter', activate);
    el.addEventListener('mouseleave', deactivate);
});

注意
addClass
和
removeClass
如何返回可用作事件处理程序的函数。将它们存储到
activate
和
deactivate
变量中意味着您不是在循环中创建函数的多个等效副本，而是将相同的函数分配给所有元素


activate
/
deactivate
变量和函数返回函数可以通过实现
hover（）
函数来避免（jQuery有一个：

在这里，事件处理函数只在需要的地方直接创建一次。比将它们存储在助手变量中要好得多。
您的代码有几个问题：

我假设在
mouseover
上，您希望将元素的类更改为active。在这种情况下，
addClass
函数必须返回另一个函数，但返回的是常规函数，而不是胖箭头，因此可以正确绑定
您是否真的需要按位和在这一行：

this.classList.remove（'active'）&this.classList.add（className）

还是逻辑与


exploreStory\u buttons=document.getElementsByClassName（'explore-story'）；
var addClass=（className）=>function（）{
this.classList.contains（className）
？（this.classList.remove（'active'）&this.classList.add（className））
：this.classList.add（className）；
}
Array.prototype.forEach.call（exploreStory_按钮，（el）=>el.addEventListener（'mouseover'，addClass.call（el，'active'））
.active{
颜色：红色
}
故事1
故事2
addClass（active）
：
active
是一个未定义的变量，因此传递给函数的参数未定义。应该是
“active”
@JeremyThille我实际上试过在参数括号中的active周围加引号，但它没有起作用。顺便说一句
&
是一个有点明智的运算符，可能你指的是短路操作的
&
。此外，如果已经有了同一个类，为什么还要添加它呢？谢谢你的建议和推荐。”“代码混淆器”是一个很有趣的笑话。然而，我尝试了实现您的解决方案，并且得到了一条错误消息，addEventListener未能在事件目标上执行：需要两个参数，但只存在一个。我对这意味着什么感到困惑，就目前而言，这就是我所说的注释
//事件侦听器在哪里？？
。我的答案的其余部分也请阅读。哇，这让我有点头晕目眩，不过我一定会尽我最大的努力将我所理解的实现到我的代码中。这些绝对是一些我以前从未遇到过的概念。我想问一下：在提供的示例中，您从函数中删除了if语句。这仅仅是因为在您的实现中不需要它们吗？或者你只是因为不需要分享你的观点而没有添加它们？它们是不需要的。我信任
类列表。添加
和
类列表。删除
以便足够聪明地执行
类列表。包含自己的检查。我自己做检查意味着要做两次。我实现了您的第三个代码段示例，它成功了：尽管我必须将这些逗号换成分号。再次感谢您的代码和解释。我觉得如果我能够牢牢掌握你分享的概念，我肯定会成为一个更好的开发者。再次感谢！哦，哇，我确实打算使用functional，而且可以肯定：如果你没有向我指出，我就永远不会发现这个错误。多谢各位！
function hover(elements, onenter, onleave) {
    elements.forEach(el => {
        el.addEventListener('mouseenter', onenter);
        el.addEventListener('mouseleave', onleave);
    });
}

hover(exploreStory_buttons, function () {
    this.addClass('active');
}, function () {
    this.removeClass('active');
});