forループ内のjqueryクリック機能

Question

私はこのコードを持っています。何らかの理由で第1のconsole.logがコンソールにうまく表示されますが、第2のボタンをクリックすると私には未定義のメッセージが表示されます。 cvs配列はグローバルです。 助けてくれてありがとう

var losotro = ['div.santiago', 'div.karina', 'div.roman', 'div.marcos']; 
var cvs = ['div#cv0 p', 'div#cv1 p', 'div#cv2 p', 'div#cv3 p']; 
    for (i = 0; i < losotro.length; i++) { 
     console.log(cvs[i]); 
     jQuery(losotro[i]).click(function(){ 
      console.log(cvs[i]);  
    }); 
} 

Answer 1

これはJavaScriptの一般的なクロージャの問題です。

基本的に、すべてのコールバック（クリックイベントハンドラ）は同じ変数iを参照しています（これは最初は私にとっては奇妙です）。ループの最後にはlosotro.lengthが必要です。 これは絶対にlosotro配列のインデックス範囲外です。

JavaScriptでクロージャがどのように機能するかを確認したい場合があります。しかし、現在の問題については、これを行うことができます。

var cvs = ['div#cv0 p', 'div#cv1 p', 'div#cv2 p', 'div#cv3 p']; 
for (i = 0; i < losotro.length; i++) { 
    console.log(cvs[i]); 
    var bindedFunc = (function(i) { 
     return function() { 
     console.log(i) 
     } 
    })(i) 
    jQuery(losotro[i]).click(bindedFunc); 
}