Генерация нескольких JQuery Click

0

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

            $("#thumb-0").click(function(){
                index=0;
                switchHouse(index);
            });
            $("#thumb-1").click(function(){
                index=1;
                switchHouse(index);
            });
            $("#thumb-2").click(function(){
                index=2;
                switchHouse(index);
            });
                            ...
            $("#thumb-X").click(function(){
                index=arrayLength;
                switchHouse(index);
            });

Я попробовал следующее, но не работает явно:

            for (var i=0; i<topHouse.length; i++){
                $("#thumb"+i).click(function(){
                    index=i;
                    switchHouse(index);
                });
            }
Теги:

4 ответа

4
Лучший ответ

При итерации каждая функция закрывается над переменной i. Когда функция оценивается, значение i достигло конца итерации. Другими словами, когда вы нажимаете миниатюру, значение i является topHouse.length, поэтому функция по существу устанавливает index = topHouse.length.

Попробуйте использовать закрытие, чтобы каждый обработчик имел свое значение индекса:

for (var i=0; i<topHouse.length; i++){
    $("#thumb"+i).click((function(index) {
        return function() {
            switchHouse(index);
        }
    })(i));
}
Поделиться
  • 0
    Можете ли вы сказать мне, почему нам нужно return function () {}, я новичок в этом
  • 1
    @ user308553 Конечно. Видите ли, мы хотим иметь возможность ссылаться на значение i на этой конкретной итерации , не закрывая наш обработчик над i и не обновляя его значение. Когда я говорю «закрыть», я имею в виду, что если вы ссылаетесь на i в функции напрямую, функция фиксирует фактическую переменную i , которая меняется с каждой итерацией. Чтобы избежать этого, мы передаем значение i анонимной функции (внутри click ), которая создает желаемую функцию-обработчик и возвращает ее. Внутренняя функция привязывается к параметру index , который будет иметь значение i .
Показать ещё 2 комментария
3

Вы можете использовать Starts With

$( document ).ready(function() {

$("[id^='thumb']").click(function() {
    switchHouse( $(this).index() );  // or add $(this).index()+1

});
Поделиться
2

Вот одно решение.

Измените свою разметку следующим образом:

<whatever class="thumbnail" data-index="1" />

И ваш обработчик этого:

$('.thumbnail').click(function() {
    switchHouse($(this).data('index'));
});
Поделиться
1

Добавьте класс к каждому изображению с уникальным идентификатором большого пальца, чтобы вы могли настроить его с помощью JQuery. Тогда сделайте это.

<img id="thumb-25" class="aThumb" src="...">

 $('.aThumb').click(function(e){
var getTheID = $(this).attr('id');
getTheID = getTheID.substring(6);

// switchHouse(getTheID);
  alert(getTheID);
});
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню