Question

我正在尝试迭代一个数组，如下所示：

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中的工作方式，我得到了意外的标识符。我需要它来遍历locs数组。

我该怎么做？太沮丧了！

我尝试了return function这件事，但它没有用。

E.G：

for (i = 0; i < locations.length; i++) {
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

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

Answer 1

您似乎正在做的是以数字方式索引您的可点击元素，在这里可能更好地为它们提供所有类，并且可能给它们一些data-属性来指示任何进一步的信息而不是数字ID。这有很多好处，首先一旦你使用了Id，你就不应该再使用它了。如果您想在同一个DOM结构中再次使用相同的技术，#1，#2等将需要成为其他东西。除此之外，如果您将来将新值推送到locs数组并希望绑定元素点击事件，您会如何实现呢？

也许更好的解决方案类型涉及使用委托事件并避免使用Id进行索引。因此，要索引，您可以使用DOM结构本身，或应用data-属性。

示例元素

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

JS

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

无需支持步骤闭包或使用昂贵的$.each调用，只要使用正确的类和索引创建元素，也可以随时将新位置推送到locs数组。点击它，它将有一个绑定事件平移到标记。

Answer 2

但是我得到了意外的标识符，因为Javascript中的循环方式

它与循环的工作方式无关。

我尝试了return function这件事，但它没有用。

返回一个函数不会做任何事情。返回值必须是事件处理程序函数的布尔值。

你有关闭问题。

你很幸运'因为你正在使用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循环将使其超出可下标的数组元素。

点击时在Javascript中迭代数组

2 个答案: