在JavaScript关闭方面遇到困难

Question

I wrote some JavaScript for a menu toggle, now I want to reuse this for multiple elements and im struggling on how I can create a closure to do this the right way.

Now the effect is only on the last registered element, becaus of the scope of setup options etc.

 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

It is not a closure issue, you always overwrite your opt.element with the latest element, that's why only with the last one works.

You should save the datas in opts by a unique id.

Here is a working example with super simple markup (ugly): https://jsfiddle.net/cone0oof/2/

Answer 2

The solution for this is to remove the closure, use the local scoped variables and pass them as parameters instead, because you want them to be created new for each different element.

Below here is mostly the same as your original code. I marked my changes with inline comments.

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