1

重複の可能性:
ループ内の Javascript クロージャー - 簡単な実用例

このコードの「i」の値が数字の 4 を出力する理由を誰か教えてもらえますか? ループは 3 までしか進みませんが、menu_feedback div 内に「i = 4」と表示されます。

for(i=1; i<=3; i++){
    $('#file_button'+i).hover(function (){
        $('#menu_feedback').html('i = '+i+'<br/>');
    }, function(){
        $('#menu_feedback').html('');
    });
}

.

<button type="button" id="file_button1">Door 1</button>
<button type="button" id="file_button2">Door 2</button>
<button type="button" id="file_button3">Door 3</button>

<div id="menu_feedback"></div>
4

3 に答える 3

5

閉鎖の世界へようこそ。

これを使って：

for(i=1; i<=3; i++) {
    (function(i) {
        // the code that depends on i
    })(i);
}
于 2012-06-21T18:01:42.733 に答える
3

これは古典的な JavaScript の問題です。これはi、hover関数内の変数がループからの同じ変数であるためです。つまり、ループが終了するiと 4 になるので、関数では 4 になります。

次のようなことを試してください：

var hoverFunc = function(i){
    return function(){
        $('#menu_feedback').html('i = '+i+'<br/>');
    };
};
for(i=1; i<=3; i++){
    $('#file_button'+i).hover(hoverFunc(i), function(){
        $('#menu_feedback').html('');
    });
}

hoverFunc閉鎖です。の値を「閉じる」関数を返しますi。

于 2012-06-21T18:02:14.623 に答える
2

ループ内の JavaScript クロージャーを見てください。直面している問題の詳細については、簡単で実用的な例です。

ただし、jQuery イベント ハンドラーを使用する場合は、インデックスをイベント データとして渡すことで、これを解決する別の方法があります。

for(i=1; i<=3; i++){
    $('#file_button'+i).mouseenter({index: i}, function(event){
        $('#menu_feedback').html('i = '+ event.data.index + '<br/>');
    }).mouseleave(function(){
        $('#menu_feedback').html('');
    });
}
于 2012-06-21T18:04:19.013 に答える