Question

我正在尝试遍历一个简单的数组，根据数组值查找元素，然后为每个元素添加一个click事件。出于某种原因（可能与范围相关？），所有事件都认为它们位于数组的末尾。

示例HTML：

<!-- "Sectors" -->
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>

对应的javascript：

var sectorArray = ["a", "b", "c"];
// Loop over sector letters
for (var s in sectorArray) {
    var sector = sectorArray[s];
    console.log("Adding click event for sector: " + sector);
    $('div.' + sector).on("click", function(e){
        console.log("Clicked sector: " + sector);
    });
}

当我点击任何div时，我得到的消息是我在扇区“c”。这是一个jsfiddle：http://jsfiddle.net/luken/Pd66m/

我能够通过将for循环中的所有内容都放入它自己的独立函数来解决问题......还有其他解决方案......但我想弄清楚为什么这个，上面，赢了'工作。感谢。

Answer 1

关闭问题，试试这个。我添加了一个匿名函数来“封闭”循环值。

var sectorArray = ["a", "b", "c"];
// Loop over sector letters
  for (var s in sectorArray) {
    var sector = sectorArray[s];
    (function(sec){
      $('div.' + sec).on("click", function(e){
        console.log("Clicked sector: " + sec);
      });
    }(sector))
 }

Answer 2

使用纯js的另一种方法，添加一个闭包：

for (var s in sectorArray) {
    (function(s){  //This line creates a 'per loop cycle' s var
       var sector = sectorArray[s];
       console.log("Adding click event for sector: " + sector);
       $('div.' + sector).on("click", function(e){
           console.log("Clicked sector: " + sector);
       });
    })(s);   //Calls the function
}

这样内部s不是'共享'，每个循环周期都有自己的副本，因此不会被覆盖。

希望这会有所帮助。干杯

Answer 3

这是using closure in a loop

的已知问题

$.each(sectorArray, function (i, sector) {
    console.log("Adding click event for sector: " + sector);
    $('div.' + sector).on("click", function (e) {
        $selection.html(sector);
        console.log("Clicked sector: " + sector);
    });
})

Answer 4

你也可以创建一个返回事件处理函数的函数，传入扇区并立即执行它：

$('div.' + sector).on("click", 
  function(sec){
    return function(e) {
      console.log("Clicked sector: " + sec);
    };
  }(sector)
);

如何循环数组并添加jQuery单击事件？

4 个答案: