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

のbecausそれは閉鎖の問題ではありません

さて、あなたはいつもとあなたのopt.elementを上書き最新の要素は、それが最後の要素だけで動作する理由です。

optsのデータは一意のIDで保存する必要があります。ここで

は、超簡単なマークアップ（醜い）と実施例である。このため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')});