Javascript 事件处理程序总是被添加到数组中的最后一个对象

Question

我试图在“切换折叠”按钮(实际上是一个图像)上执行两个任务:

1. 如果页面的一部分是折叠加载的(来自 cookie)，则将“collapsed”类添加到祖先标记。
2. 添加事件处理程序以在单击按钮时切换“折叠”类的存在。

为此，我有以下代码:

function toggleCollapsedPlugin(sender, collapseState) {
    // do something
    // expects 1 OR 2 arguments
}

function initCollapsedPlugin() {
    var forumcats = document.getElementById('forums').getElementsByClassName('forumbit_nopost L1');
    var button;
    var buttonParent;
    for (var i = 0; i < forumcats.length; i++) {
        button = forumcats[i].getElementsByTagName('a')[1].getElementsByTagName('img')[0]; // will always exist
        buttonParent = button.parentNode.id; // will never be empty
        if (button.src.indexOf('_collapsed') >= 0) {
            toggleCollapsedPlugin(button.parentNode.id, true);
        }
        button.addEventListener('click', function () { toggleCollapsedPlugin(buttonParent); }, false);
    }
}

当我逐步通过 initCollapsedPlugin()对于 Chrome DevTools 中的第一项，一切似乎都很好。当我稍后单击其中一个图像调用 toggleCollapsedPlugin(sender) 时, sender始终等于 buttonParent forumcats 中的最后 项.有人可以解释为什么以及如何解决这个问题吗？

(如果它能帮助任何人提供答案，这是 vBulletin4 软件。)

Answer 1

这是 JavaScript 闭包的经典“陷阱”。基本上，您的 buttonParent 变量在每次迭代中都会被覆盖，您传递给 addEventListener 的匿名函数 引用但不会复制 这个变量。

您可能需要类似于:

button.addEventListener('click', (function (parent) {
    return function() {
        toggleCollapsedPlugin(parent);
    };
})(buttonParent), false);

有关更详细的说明，请参阅 How do JavaScript closures work? .

然而，在您的情况下，您可以简单地完全摆脱关闭的变量，并在调用匿名函数时找到按钮的父级。这是有效的，因为回调函数内部的 this 指的是事件注册的元素，是 button 在该迭代中引用的元素。

button.addEventListener('click', function() {
    return toggleCollapsedPlugin(this.parentNode.id);
}, false);