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

Question

为了使我的代码更简洁，我决定采用我经常使用的 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));

任何对我做错了什么的见解将不胜感激。像往常一样，我觉得解决方案可能很简单：我只是没有看到它。

Answer 1

您想在适当的上下文中调用该函数。为此目的有Function#call。您还需要使用普通函数，因为“胖箭头”函数处理 this 的方式不同。

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 变量中意味着您不会在循环内创建函数的多个等效副本，而是实际上将相同的函数分配给所有元素。

---

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

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');
});

这里的事件处理函数只在需要的地方直接创建一次。比将它们存储在辅助变量中要好得多。

Answer 2

您的代码有几个问题：

1. 我假设您想在mouseover 上将元素的类更改为活动。在这种情况下，addClass 函数必须返回另一个函数，但是是常规函数，而不是粗箭头，因此可以正确绑定。

2. 你真的想要在这一行上按位与吗：

   this.classList.remove('active') & this.classList.add(className)

还是逻辑与？

exploreStory_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_buttons, (el) => el.addEventListener('mouseover', addClass.call(el, 'active')));

.active {
  color: red
}

<button class="explore-story active">Story 1</button>
<button class="explore-story">Story 2</button>