Question

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

<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小提琴演示这个问题吗？

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

如果情况并非如此，我想知道这是封闭和变量的问题。这样的事情可能有所帮助：

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

如果你想要的话，你也可以使用一个开关盒，或者像你的循环代码一样使用数字附加逻辑。您可能/可能不会使用该类，如果需要，可以直接查询$('input[type=button]')。

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

希望这有帮助。

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

3 个答案: