клиентская сторона берет некоторые изображения с сервера, а затем основывается на создании снимков эскизов. Когда пользователь нажимает на эти миниатюры, он что-то делает. Однако количество изображений, отправленных с сервера, может быть любым числом. Итак, теперь я застрял, я не знаю, как создать функцию щелчка, не записывая каждый из них, как показано ниже. Может ли кто-нибудь вести меня в правильном направлении, не давая мне фактического ответа?
$("#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);
});
}
При итерации каждая функция закрывается над переменной 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));
}
Вы можете использовать Starts With
$( document ).ready(function() {
$("[id^='thumb']").click(function() {
switchHouse( $(this).index() ); // or add $(this).index()+1
});
Вот одно решение.
Измените свою разметку следующим образом:
<whatever class="thumbnail" data-index="1" />
И ваш обработчик этого:
$('.thumbnail').click(function() {
switchHouse($(this).data('index'));
});
Добавьте класс к каждому изображению с уникальным идентификатором большого пальца, чтобы вы могли настроить его с помощью 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);
});
i
на этой конкретной итерации , не закрывая наш обработчик надi
и не обновляя его значение. Когда я говорю «закрыть», я имею в виду, что если вы ссылаетесь наi
в функции напрямую, функция фиксирует фактическую переменнуюi
, которая меняется с каждой итерацией. Чтобы избежать этого, мы передаем значениеi
анонимной функции (внутриclick
), которая создает желаемую функцию-обработчик и возвращает ее. Внутренняя функция привязывается к параметруindex
, который будет иметь значениеi
.