单击时在Javascript中遍历数组

我尝试遍历一个数组，如下所示：

var locs = [
  ['Location 0', 50, 91], 
  ['Location 1', 50, 100]
];

for (i = 0; i < locs.length; i++) {
    $('#' + i).click(function(i) {
        map.panTo(new google.maps.LatLng(locs[i][1], locs[i][2]));
    })

}

但由于Javascript中循环的工作方式，我得到了意外的标识符

这与循环的工作方式无关

我尝试了

返回函数

功能，但没有成功

返回函数不会起任何作用。返回值必须是事件处理程序函数中的布尔值

你有闭包问题

您很幸运，因为您使用的是jQuery和

$。each（）

将避开闭包问题

$.each(locs, function(i) {
    $('#' + i).click(function(index) {
        map.panTo(new google.maps.LatLng(locs[i][1], locs[i][2]));
    });
});

您应该真正理解的是，内部函数在

i

上是封闭的，它包含对它的引用

---

调用

click

处理程序时，它将在作用域链中查找

i

，并找到定义它的作用域。当它发生的时候，

for

循环的

将使它增加到一个可下标数组元素之外。
您似乎正在做的是以数字方式索引可单击元素，在这里，最好给它们都一个类，并可能给它们一些
数据-
属性，以指示任何进一步的信息，而不是数字身份证。这有很多好处，首先，一旦你使用了一个Id，你就不应该再使用它<如果您想在相同的DOM结构中再次使用相同的技术，则代码>#1

、

#2

等将需要成为其他内容。除此之外，如果将来向

loc

数组推送一个新值，然后想绑定一个元素单击事件，会发生什么情况？您将如何实现它

更好的解决方案可能包括使用委派事件和避免按Id索引。因此，要索引，可以使用DOM结构本身，或应用

数据-

属性

示例元素

<a class="map-location" data-index="1">Location 1</a>

---

无需侧步闭包或使用昂贵的

$。每次
调用，也可以随时将新位置推送到
LOC
数组中，只要使用正确的类和索引创建元素以单击，它将有一个绑定事件平移到标记。
ID是否实际是数字？我认为这是无效的html。耶，读得不够：）是的，我尝试了返回函数的事情，比如谷歌的例子，因为闭包，但我一定是做错了。我在添加功能失调的代码时考虑了闭包。@很遗憾，您尝试的代码无法做到这一点。您可以将IIFE或
与（）{}
一起使用，也可以只使用jQuery的迭代器。谢谢你的闭包视频。我会看的。现在出于某种原因，代码会更新信息窗口，但不会转到新位置。它位于列表中的最后一个位置。无需侧步闭包或使用昂贵的$。每个调用都是，这样存储数据可以避免那些讨厌的昂贵函数调用……）
<a class="map-location" data-index="1">Location 1</a>

var locs = [
    ['Location 0', 50, 91], 
    ['Location 1', 50, 100]
];

$(document).on('.map-location', 'click', function(event) {
    var self = $(this),
        index = self.data('index'), // Index by `data-index`
        selfIndex = self.parent().index(self); // Or index by DOM location

    map.panTo(new google.maps.LatLng(locs[index][1], locs[index][2]));
});