在JavaScript关闭方面遇到困难

Question

我为菜单切换编写了一些JavaScript，现在我想将其重用于多个元素，并为如何创建一个正确的闭合方式而苦苦挣扎。

现在，由于设置选项的范围等，效果仅在最后注册的元素上。

 var selectGroup = (function () { var defaults = { element: document.getElementById('form-select'), }; var setup = { open: false }; var opt = {}; self.init = function (options) { opt = options || defaults; opt.element = options.element || defaults.element; setup.navButton = opt.element.getElementsByClassName('nav-button')[0]; setup.ulTag = opt.element.getElementsByTagName('ul')[0]; setup.buttonArrow = opt.element.getElementsByTagName('span')[1]; registerEvents(); }; registerEvents = function () { opt.element.onclick = function () { if (setup.open) { setup.buttonArrow.setAttribute('class', 'expand-arrow'); setup.ulTag.setAttribute("style", 'max-height:0;'); } else { setup.buttonArrow.setAttribute('class', 'contract-arrow'); setup.ulTag.setAttribute("style", 'max-height:600px;'); } /*Toggle*/ setup.open = !setup.open; } }; return self; })(); selectGroup.init({element: document.getElementById('person-nav')}); selectGroup.init({element: document.getElementById('situation-nav')}); selectGroup.init({element: document.getElementById('region-nav')}); 

Answer 1

这不是闭包问题，您总是用最新的元素覆盖opt.element ，这就是为什么只有最后一个起作用的原因。

您应该通过唯一ID将数据保存在opts中。

这是一个带有超级简单标记（丑陋）的工作示例： https : //jsfiddle.net/cone0oof/2/

Answer 2

解决方案是删除闭包，使用局部范围的变量并将其作为参数传递，因为您希望为每个不同的元素创建新的变量。

下面的代码与您的原始代码基本相同。 我用内嵌注释标记了更改。

var selectGroup = (function () {

    var defaults = {
        element: document.getElementById('form-select'),
    };

    self.init = function (options) {
        var setup = {   //make it local inside init()
            open: false
        };
        var opt = {};   //make it local inside init()

        opt = options || defaults;
        opt.element = options.element || defaults.element;
        setup.navButton = opt.element.getElementsByClassName('nav-button')[0];
        setup.ulTag = opt.element.getElementsByTagName('ul')[0];
        setup.buttonArrow = opt.element.getElementsByTagName('span')[1];
        registerEvents(opt, setup);  //pass them as parameters
    };


    registerEvents = function (opt, setup) { //receive the parameters
        opt.element.onclick = function () {
            if (setup.open) {
                setup.buttonArrow.setAttribute('class', 'expand-arrow');
                setup.ulTag.setAttribute("style", 'max-height:0;');
            } else {
                setup.buttonArrow.setAttribute('class', 'contract-arrow');
                setup.ulTag.setAttribute("style", 'max-height:600px;');
            }
            /*Toggle*/
            setup.open = !setup.open;
        }
    };

    return self;
})();

selectGroup.init({element: document.getElementById('person-nav')});
selectGroup.init({element: document.getElementById('situation-nav')});
selectGroup.init({element: document.getElementById('region-nav')});