jQuery: цикл повторяется по пронумерованным селекторам? - PullRequest
Новая
       23

jQuery: цикл повторяется по пронумерованным селекторам?

0 голосов
/ 17 ноября 2011

У меня есть карта 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);
});

Это прекрасно работает, но я бы хотел написать функцию щелчка в виде цикла, поэтому мне не нужно продолжать использовать избыточный код. Но я не могу понять это.

Я пробовал следующее: 

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, поэтому подозреваю, что это что-то простое, я еще не понимаю. Есть намеки?

Ответы [ 3 ]

2 голосов
/ 17 ноября 2011

Ничего сразу не выскакивает как неправильное, похоже, это должно быть правильно.

Можете ли вы установить 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", специфичную для каждого цикла, поэтому нет способа, чтобы он мог быть неправильно перезаписан где-то еще.Я также добавил дополнительный «отказоустойчивый» способ определения переменной «location» в каждой итерации цикла, чтобы вы могли убедиться, что в функцию click внесена правильная переменная.

EDIT Определенно проблема с вложением и переменным содержимым при доступе через клик.Еще можно попробовать следующее:

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);
    });
});
0 голосов
/ 31 января 2012

Я полагаю, это потому, что ваша переменная i в цикле for является глобальной. К моменту выполнения замыкания его значением является location.length. Это вложенная переменная, а не ее значение.

0 голосов
/ 17 ноября 2011

Попробуйте что-то вроде этого:

Добавьте класс, чтобы различать различные «типы» на входах на вашей странице (если не слишком много, вы можете пропустить это) 

<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 для установки некоторых частейкод варианта.Затем вы можете вызвать «не вариантный» код «до» или «после» вариантной логики, в зависимости от ваших потребностей.

Надеюсь, это поможет.

...