我正在尝试为我的光滑 slider 的设置做一个 each 循环。
设置中的内容如下:
$('.slider1').slick({
dots: false,
infinite: true,
swipe: false,
speed: 300,
slidesToShow: 4,
slidesToScroll: 1,
prevArrow: ".pp1",
nextArrow: ".nn1",
});
$('.slider2').slick({
dots: false,
infinite: true,
swipe: false,
speed: 300,
slidesToShow: 4,
slidesToScroll: 1,
prevArrow: ".pp2",
nextArrow: ".nn2",
});
因此每个 slider 都需要基本相同的设置,但是 prevArrow
和 nextArrow
中的选择器和类各增加一个。它们都有一个共同的父包装器,称为 .slider-wrapper
。
我想我必须对父元素执行每个循环,获取子元素。
slider +=1
并在 prev/next
设置中使用 +=1
。
var prev = '.pp';
var next = '.nn';
var sliders = '.slider';
function prevAdd() {
return prev += 1;
};
function nextAdd() {
return next += 1;
};
function slidersAdd() {
return sliders += 1;
};
$.each('.slider-wrapper').child(slidersAdd()).slick({
prevArrow: prevAdd(),
// various settings
});
这可能充满了错误,但它几乎是我自己能解决的最好问题。
编辑:HTML 标记
<div class="slider-wrapper">
<div class="slider-nav>
<button class="pp1">prev</button>
<button class="nn1">next</button>
</div>
<div class="slider1">
<!-- list of divs for slider elements. Irrelevant for problem -->
</div>
</div>
<div class="slider-wrapper">
<div class="slider-nav>
<button class="pp2">prev</button>
<button class="nn2">next</button>
</div>
<div class="slider2">
<!-- list of divs for slider elements. Irrelevant for problem -->
</div>
</div>
等等,还有多个 slider 。
最佳答案
如果你的 slider 都有 slider
类,那么你可以这样做,在选定的元素集合上应用 each
方法:
$('.slider-wrapper .slider').each(function (index, slider) {
var id = index + 1;
$(slider).slick({
prevArrow: ".pp" + id,
nextArrow: ".nn" + id,
// various settings
});
});
如果您没有在每个 slider 元素上都有 slider
类,而是一个后缀有唯一编号的类,则使用此选择器:
$('.slider-wrapper [class^=slider]').each( // ...etc
但实际上,您不应该为每个 slider 分配不同的类。类名不是唯一标识符。您可以将它重复用于类似的元素。
关于Javascript each 循环遍历 slider 设置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39207116/