Javascript each 循环遍历 slider 设置

Question

我正在尝试为我的光滑 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 。

Answer 1

如果你的 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 分配不同的类。类名不是唯一标识符。您可以将它重复用于类似的元素。