jQueryをハッシュでループすることでイベントをクリックするハッシュで最後の要素を取得しますか？

Question

私はオンとオフを交互に切り替えている複数のdivがあります。私は当初ハンドラを手作業でバインドしていました（以下のコードに従って）が、いくつかのリファクタリングを行うことに決めました。しかし、ハッシュの最後のキー/値が常に選択されているところで、バインディングの問題が発生しました。このコード例では、contact_data divになります。問題は、データが閉じられていないということですが、JSでこれを強制する方法はわかりません。実際問題は、データを

var link_div = { 
    "#about_toggle" : "#about_stuff", 
    //more pairs 
    "#contact_toggle" : "#contact_data" 

}; 
/* 
* Before refactoring: 
    $("#about_toggle").click(function() 
          { 
           $("#about_stuff").toggle(); 
          }); 
*/ 
//After 
    for(var key in link_div) 
    { 
     $(key).click(function() 
      { 
       alert(link_div[key]); 
       toggle_on_element(link_div[key]); 
      }); 
    } 

Answer 1

にわたって閉鎖されているれています。イベントハンドラで渡す無名関数はループ変数を閉じるので、すべてのイベントハンドラは同じ変数を参照します。これを避けるために別の関数を呼び出す必要があります。

for(var key in link_div) 
{ 
    $(key).click(function(k) 
     { 
      return function() { 
       alert(link_div[k]); 
       toggle_on_element(link_div[key]); 
      } 
     }(key)); 
} 

Answer 2

これはすべて、言語の環境フレームバインディングモデルに戻るクロージャに関するものです。本質的にキーはループを反復し、最後に地図の最後の値を指します（途中で順序が保証されない場合がありますが、具体的な実装についてはわかりません）。このように、匿名関数（すべての要素間で共有される、一度作成され、メモリ内の1つの環境フレームを参照するため）は、すべての要素に対してlink_div [key]を切り替えますが、keyはすべての要素に対して1つの値のみ。

あなたは（jAndyが行ったように）のいずれかの各結合のためのそれを一意にするために無名関数をラップすることにより、この問題を解決、あるいは生活が少し楽にするために命名規則を使用することができます。

$('.togglers').click(function(){ $('#'+$(this).attr('id')+'_stuff').toggle(); });