Question

我创建了自动生成的ID，例如

gallary-item-0，gallery-item-1，gallery-item-1

PHP等等

等。如何配置jQuery以为每个ID启动滑块。这是我写的代码，但它仅适用于第一个ID。

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

Answer 1

请勿拨打clearInterval(sleepTime)来调用它，因为它只会触发一次，例如setTimeout。

创建一个变量，其中包含ID为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);

Answer 2

目前尚不清楚您打算使用计时器 - 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));
}

您可以从php中获取最大项目（上面代码中的2），或者使用注释中的选择器。

如何让jQuery滑块适用于生成的ID？

2 个答案: