javascript - 我正在尝试合并我的代码...为什么我不能这样做？

Question

这个问题已经有答案了:

JavaScript closure inside loops – simple practical example (45 个回答)

已关闭 10 年前。

如果你不能从我的其他问题看出，我是一个自学成才的新手。我正在尝试整合我的一些 js 代码。我有 2 个 div，类别为 a0 和 a1。我想为每个事件附加一个 mouseenter 事件(相同的事件)。

这是我的 fiddle ，这是(希望)不言自明的。 .a0 和 .a1 是我的原始代码，.f0 和 .f1 代表我的(失败的)合并尝试。为什么我不能执行“for”循环(或者，如果可以，为什么我总是以 i 的值为“2”结束？)？

(如果有办法可以在 jquery 中做到这一点，那很好)

请参阅上面的 fiddle 以获取完整的演示:

$(".a0").on("mouseenter",function(){
        $(this).html("value: 0");
});
$(".a1").on("mouseenter",function(){
        $(this).html("value: 1");
});

/* my failed attempt to consolidate the above code */
for (var i=0; i<2; i++){ 
    $(".f"+i).on("mouseenter",function(){
        $(this).html("value: "+ i);
    });
}

Answer 1

快速而肮脏

$(".a0, .a1").on("mouseenter",function(){
  $(this).html("value: " + ($(this).hasClass('a0') ? 0 : 1));
});

更优雅

为了以更优雅的方式解决您的问题，我们首先了解为什么您的代码不起作用。

您正在定义两个将读取 i 值的回调。

但是，当您的鼠标进入该元素时，i 将已设置为 2。

您可以使用闭包来防止这种情况:

for (var i=0; i<2; i++){ 
  (function(j) {
    $(".f"+i).on("mouseenter",function(){
      $(this).html("value: "+ j);
    });
  })(i);
}

在这种情况下，i 的值被捕获到 j 中，并且在调用回调时不会更改。

这是一个Working fiddle