0

如果你不能通过我的其他问题来判断，我是一个自学成才的新手。我正在尝试整合我的一些 js 代码。我有 2 个 div，a0 和 a1 类。我想为每个（相同的事件）附加一个 mouseenter 事件。

这是我的小提琴，（希望）是不言自明的。.a0 和 .a1 是我的原始代码，.f0 和 .f1 代表我（失败的）整合尝试。为什么我不能做一个“for”循环（或者，如果可以的话，为什么我总是以 i 的值“2”结束？）？

（如果有办法我可以在 jquery 中做到这一点，那很好）

有关完整演示，请参见上面的小提琴：

$(".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);
    });
}
4

2 回答 2

3

又快又脏

$(".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 中，并且在调用回调时不会更改。

这是一个工作小提琴

于 2013-03-23T19:17:59.687 回答
1

问题是 i 是一个参考，当你的处理程序被调用时，它是 === 2 以下对我有用。

var assignME = function (i) {
    $(".f"+i).on("mouseenter",function(){
        $(this).html("value: "+ i);
    });
};

for (var i=0; i<2; i++){
    assignME(i);
}
于 2013-03-23T19:23:30.560 回答