JavaScript：for循环问题

Question

我有 3 个.a 和一个函数，当它是mouseover-ed 时应该提醒.a 所属的数字[0、1 或2]：

​function a(){
    for(var c=0; c<3; c++){
        alert(c);
        $('.a:eq('+c+')').mouseover(function(){alert(c)});       
    }

}

当我执行它时，第一个alert(c)被触发了3次，消息分别为“0”、“1”、“2”，正如预期的那样。

但是，当mouseover.a时，无论是哪个.a，都会提示“3”。

http://jsfiddle.net/f6tQn/

如果有人能解释为什么会发生这种情况并提供解决方案，我将不胜感激。

Answer 1

因为 c=3。

您的循环每次运行时都会将 1 加到 C，而在代码运行后，C 仍等于 3，从而为您的警报提供 C 的值，即 3。

您的示例可以完全重写和简化为

$('.a').mouseover(function(){
    alert($(this).index());
});

这将为类a 的所有元素生成警报，并给出它们在$('.a') 生成的数组中的位置。

顺便说一句：将函数放入循环时出现 JSLint 错误，如果您想让 JSLint 满意，请查看 this Question

Answer 2

发生这种情况是因为您的每个mouseover 函数都使用相同的c 值，即循环完成时3。

您需要为每次迭代“捕获”c 的值。

function a(){
    for(var c=0; c<3; c++){
        alert(c);
        var func = function(c){
            return function(){ // closes around the current value of "c"
                alert(c);
            };
        };
        $('.a:eq('+c+')').mouseover(func(c));       
    }
}

演示：http://jsfiddle.net/vDbu3/

Answer 3

您被 javascript 中的函数作用域变量捕获。这是一个很大的 javascript 陷阱。

您需要创建一个函数来执行您希望 for 循环的主体执行的操作，并将 c 作为参数。

Answer 4

C 绑定到内存中的相同物理位置，因此当您使用鼠标悬停运行警报时，它会从最后设置的值 3 中提取。

如果您想对该主题进行更深入的阅读，您实际上是在变量 c 上创建了一个“闭包”。

试试这个

function a(){
    for(var c=0; c<3; c++){
        alert(c);
        (function(a){
           $('.a:eq('+a+')').mouseover(function(){alert(a)});
        })(c);      
    }

}