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

Question

这个问题已经有答案了:

JavaScript closure inside loops – simple practical example (45 个回答)

已关闭 9 年前。

我试图循环一个简单的数组，根据数组值查找元素，然后为每个元素添加一个单击事件。由于某种原因(可能与范围有关？)所有事件都认为它们位于数组的末尾。

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