-1

我正在尝试遍历数组，如下所示：

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但没有用。

例如：

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

2 回答 2

1

您似乎正在做的是用数字索引您的可点击元素，最好给它们一个类，并可能给它们一些data-属性以指示任何进一步的信息，而不是数字 id。这有很多好处，首先，一旦你使用了一个 ID，就永远不要再使用它。#1等如果你想在同一个 DOM 结构中再次使用相同的技术，#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数组，只要使用正确的类和索引创建元素以单击，它将有一个绑定事件可以平移标记。

于 2013-07-13T10:21:21.187 回答
0

但是由于循环在 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]));
    });
});

你真正应该理解的是内部函数 close over i，并且它持有对它的引用。

调用该click处理程序时，它将i在作用域链中查找并找到定义它的作用域。当它这样做时，该for循环将增加它超出可下标的数组元素。

于 2013-07-13T09:30:55.793 回答