Как заставить слайдер jQuery работать для сгенерированных идентификаторов?
Я создал автоматически сгенерированные идентификаторы, такие как
gallary-item-0, gallery-item-1, gallery-item-1
и так далее с PHP. Как настроить jQuery запустить слайдер для каждого идентификатора.
Вот код, который я написал, но он работает только для первого идентификатора.
var i = 0;
sleepTime = setInterval(function () {
var id = $(this).attr("id");
$('#gallery-item-'+i).ionImageSlider({
slideWidth: 150,
minSlides: 2,
maxSlides: 10,
moveSlides: 1,
slideMargin: 50,
pager: false
});
i++;
clearInterval(sleepTime);
}, 3000);
});
Решение
Не звони clearInterval(sleepTime) где вы его называете, потому что он будет срабатывать только один раз, как setTimeout,
Создайте переменную, которая имеет количество всех элементов с идентификатором, начинающимся с gallery-item, а затем позвоните clearInterval в вашем обработчике, когда счетчик достигнут.
var i = 0,
total = $('[id^="gallery-item-"]').length,
sleepTime = setInterval(function () {
$('#gallery-item-'+ i).ionImageSlider({
slideWidth: 150,
minSlides: 2,
maxSlides: 10,
moveSlides: 1,
slideMargin: 50,
pager: false
});
i++;
if (i == total - 1) {
clearInterval(sleepTime);
}
}, 3000);
Другие решения
Непонятно, для чего вы собираетесь использовать таймер — показывать все через 3 секунды или показывать каждый через 3 секунды.
Без таймера:
for (var i=0;i<2;++i) {
$('#gallery-item-'+i).ionImageSlider({
slideWidth: 150,
minSlides: 2,
maxSlides: 10,
moveSlides: 1,
slideMargin: 50,
pager: false
});
}
С одним таймером:
setTimeout(function() {
... same code as above ...
}, 3000);
С таймерами:
for (var i=0;i<2;++i) {
var loopI = i;
setTimeout(function() {
$('#gallery-item-'+loopI).ionImageSlider({
slideWidth: 150,
minSlides: 2,
maxSlides: 10,
moveSlides: 1,
slideMargin: 50,
pager: false
});
}, 3000 + (i+1));
}
Вы можете получить максимум предметов ( 2 в коде выше) из вашего php или с помощью селектора, как в комментариях.