如何使jQuery滑块为生成的ID工作？
如何使jQuery滑块为生成的ID工作？
提问于 2016-03-24 07:42:26
我已经创建了自动生成的ids，例如
画廊-项目-0，画廊-1，画廊-项目-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);
});回答 2
Stack Overflow用户
发布于 2016-03-24 09:06:38
不要在调用clearInterval(sleepTime)的地方调用它，因为它只会触发一次，就像setTimeout一样。
创建一个变量，该变量具有以gallery-item开头的id的所有项的计数，然后在达到计数时在处理程序中调用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);Stack Overflow用户
发布于 2016-03-24 09:18:17
还不清楚你打算用计时器做什么--在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 )，或者使用选择器(如注释中的选择器)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36195283
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号