Question

如果你不能通过我的其他问题说出来，我就是一个自学成才的新手。我试图整合一些我的js代码。我有2个div，类a0和a1。我想将mouseenter事件附加到每个（同一事件）。

这是我的fiddle，（希望）不言自明。 .a0和.a1是我的原始代码，.f0和.f1代表我（失败）的合并尝试。为什么我不能做＆＃34;因为＆＃34;循环（或者，如果可以的话，为什么我总是最终得到＆＃34; 2＆＃34;对于我来说？）？

（如果我能在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);
    });
}

Answer 1

快速＆amp;脏

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

更优雅

要以更优雅的方式解决您的问题，我们首先要了解您的代码无效的原因。

您正在定义两个回调，它们将读入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

Answer 2

问题是我是一个引用，当你的处理程序被调用时它是=== 2 以下适用于我。

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

for (var i=0; i<2; i++){
    assignME(i);
}

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

2 个答案:

快速＆amp;脏

更优雅