jQuery: Loop iterating through numbered selectors?

问题

I have a Google Map with some simple buttons added to pan to different locations.

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

Originally, I was using this code to make the buttons work:

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

This works fine, but I would love to write the click function as a loop, so I don't have to keep using redundant code. But I can't seem to figure it out.

I have tried the following:

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

}

But I get an error when trying to use the buttons: panTo: latLng must be of type LatLng (122 out of range 43). I'm not well-versed with jQuery, so I suspect this is something simple I don't understand yet. Any hints?

回答1:

Nothing immediately pops out as being wrong, this looks like it should be correct.

Can you put up a JS Fiddle demonstrating the problem at all?

My first hunch would be that your code is correct but somehow you are getting invalid data in the locations array.

If that's not the case, I wonder if it's an issue with enclosure and the variables. Something like this may help:

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

I first made the declaration of the "i" variable specific to each loop, so there's no way that it can get overwritten improperly somewhere else. I also added the additional "fail safe" of defining the "location" variable in each iteration of the loop so that you can ensure the correct variable makes it to the click function.

EDIT Definitely an issue with enclosure and the variable content when accessed via click. Something else you could try is this:

1: Add a common class to each button, something like class="locButton"

2: Try this:

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

回答2:

I believe it's because your i variable in the for loop is global. By the time the closure is executed it's value is locations.length. It's the variable that is enclosed, not it's value.

回答3:

Try something like this:

Add a class to distinguish between the various 'types' on inputs on your page (if not too many you can skip this)

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

You may use a switch-case too if you want or a number appending logic like your loop code. You may/may not use the class and directly query like $('input[type=button]') if you want.

You just want to organize the code to remove redundancy but you have an if-else like logic structure to set some parts of the 'variant' code. You can then call the 'non-variant' code 'before' or 'after' the variant logic, depending on your needs.

Hope this helps.

来源：https://stackoverflow.com/questions/8158886/jquery-loop-iterating-through-numbered-selectors

标签

jquery

google-maps

loops

button

selector