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