JavaScript for loop的次数太多了

JavaScript for loop goes too many times.

本文关键字：太多 for loop JavaScript      更新时间：2023-09-26

可能的重复项：
循环内的Javascript闭包 - 简单的实际示例

有人可以告诉我为什么这段代码中"i"的值打印出数字 4 吗？ 循环只到 3，但它会在menu_feedbackdiv 内打印"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>

欢迎来到闭包的世界。

使用这个：

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

这是一个经典的 JavaScript 问题。 这是因为hover函数中的变量i与循环中的变量相同。 因此，当循环结束时，i为 4，因此函数中的 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 的值周围"关闭"。

看看 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('');
    });
}
相关文章：