如何遍历数组并添加jQuery点击事件？

我想循环一个简单的数组，找到基于数组值的元素，然后为每个元素添加一个单击事件。出于某种原因（可能与范围有关？），所有事件都认为它们在数组的末尾。如何遍历数组并添加jQuery点击事件？

示例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-loop内的所有东西都进入它自己的独立功能......还有其他解决方案......但我想弄清楚为什么这在上面不起作用。谢谢。

来源

2014-01-12 Luke

真的不应该用'for..in'阵列上。 –

^为什么不@JamesMontagne？ – Luke

@Luke迭代次序不保证。继承的属性也被枚举。坏juju。 – Alex

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

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)) 
}

来源

2014-01-12 02:09:08

虽然这些解决方案中的很多都有效，但我使用了该解决方案。它运行良好......虽然我不喜欢匿名函数表示法。 – Luke

这是一个已知的问题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); 
    }); 
})

来源

2014-01-12 02:07:34

谢谢，该链接有助于解释它！ – Luke

纯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不是“共享”和每个循环周期都会有自己的副本，所以它不会覆盖。

希望这会有所帮助。干杯

来源

2014-01-12 02:09:48

您还可以返回该事件处理函数的功能，通过该部门并立即执行这样的：

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

来源

2014-01-12 02:28:27 scf1001

如何遍历数组并添加jQuery点击事件？

回答

相关问题