jQuery：循环遍历编号选择器？

Question

我有一个谷歌地图，其中添加了一些简单的按钮来平移到不同的位置。

<input id="loc0" type="button" value="Cape Sable (6)">
<input id="loc1" type="button" value="Florida Bay (3)">

最初，我是使用这段代码来使按钮工作的：

var locations = [
    new google.maps.LatLng(25.171, -81.060),
    new google.maps.LatLng(25.211, -80.650) 
];


$('#loc0').click(function(){
    map.panTo(locations[0]);
    map.setZoom(12);
});

$('#loc1').click(function(){
    map.panTo(locations[1]);
    map.setZoom(12);
});

这很好用，但我希望将 click 函数编写为循环，因此我不必继续使用冗余代码。但我似乎无法弄清楚。

我尝试了以下方法：

for (i = 0; i < locations.length; i++) {
    $('#loc'+i).click(function() {
        map.panTo(locations[i]);
        map.setZoom(12);
    });

}

但尝试使用按钮时出现错误：panTo: latLng must be of type LatLng (122 out of range 43)。我不精通jQuery，所以我怀疑这是我还不明白的简单事情。有什么提示吗？

Answer 1

没有立即弹出错误，这看起来应该是正确的。

你能用一个 JS Fiddle 来演示这个问题吗？

我的第一个预感是您的代码是正确的，但不知何故您在位置数组中得到了无效数据。

如果不是这样，我想知道这是否是外壳和变量的问题。这样的事情可能会有所帮助：

for (var i = 0; i < locations.length; i++) {
    var location = locations[i];
    $('#loc'+i).click(function() {
        map.panTo(location);
        map.setZoom(12);
    });
}

我首先声明了每个循环特定的“i”变量，所以它不可能在其他地方被不正确地覆盖。我还在循环的每次迭代中添加了额外的“故障安全”定义“位置”变量，以便您可以确保正确的变量使其进入点击函数。

编辑 通过单击访问时，附件和可变内容绝对是一个问题。您可以尝试的其他方法是：

1：为每个按钮添加一个通用类，例如 class="locButton"

2：试试这个：

$(".locButton").each(function(){
    $(this).click(function(){
        var locId = parseInt($(this).attr('id').replace('loc',''));
        map.panTo(locations[locId]);
        map.setZoom(12);
    });
});

Answer 2

我相信这是因为你在 for 循环中的 i 变量是全局的。到执行闭包时，它的值是locations.length。封闭的是变量，而不是值。

Answer 3

试试这样的：

添加一个类来区分页面上输入的各种“类型”（如果不是太多，你可以跳过这个）

<input id="loc0" class="panbutton" type="button" value="Cape Sable (6)">
<input id="loc1" class="panbutton" type="button" value="Florida Bay (3)">

$('input.panbutton').click(function() {
  var id = $(this).attr('id');

  if(id === "loc0")
     map.panTo(locations[0]);

  else if (id === "loc1")
     map.panTo(locations[1]);

  map.setZoom(12);
});

如果您愿意，也可以使用 switch-case 或像循环代码这样的数字附加逻辑。如果需要，您可以/可以不使用该类并直接查询$('input[type=button]')。

您只想组织代码以消除冗余，但您有一个类似 if-else 的逻辑结构来设置“变体”代码的某些部分。然后，您可以根据需要在变体逻辑“之前”或“之后”调用“非变体”代码。

希望这会有所帮助。