javascript - 迭代时为 DOM 事件监听器分配变量

Question

我想这里缺少一些基本的东西；

for (var i=1; i<=5; i++) {
  var o = $('#asd'+i);

  o.mouseover(function() {
    console.info(i);
  });
}

当悬停在五个不同的元素上时，我总是从迭代中得到最后一个值；值 5。我想要的是不同的值，具体取决于我悬停在哪个元素上，从 1 到 5。

我在这里做错了什么？

Answer 1

你需要一个闭包，因为所有的鼠标悬停函数都引用同一个变量，其值正在改变:

for (var i=1; i<=5; i++) {
    (function(j) {
        $('#asd'+j).mouseover(function() {
            console.info(j);
        });
    })(i);
}

通过创建闭包，变量 j 位于函数的局部范围内，并且不会在“外部”i 更改时更改。