Question

可能重复：
Javascript closure inside loops - simple practical example

有人能告诉我为什么这段代码中'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>

Answer 1

欢迎来到封闭世界。

使用此：

for(i=1; i<=3; i++) {
    (function(i) {
        // the code that depends on i
    })(i);
}

Answer 2

这是一个经典的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的值“关闭”的函数。

Answer 3

有关您遇到的问题的详细信息，请查看JavaScript closure inside loops – simple practical example。

但是，对于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('');
    });
}

JavaScript for循环次数太多了。

3 个答案: