javascript - 如何将 `$(this)` 传递给 Slick.js 插件(并使用循环创建多个轮播)

Question

如何将 $(this).find('.option') 和 $(this).find('.prev_next') 传递给 Slick.js ？产生以下结果:语法错误，无法识别的表达式:[object Object]:not(.slick-cloned) in jquery-2.1.0.js:1429

http://jsfiddle.net/frank_o/Lr30ngo1/4/

$('.test').each(function () {
    var option = $(this).find('.option'),
        prev_next = $(this).find('.prev_next');

    $(this).slick({
        slide: option,
        appendArrows: prev_next,
        prevArrow: '<a>Previous</a>',
        nextArrow: '<a>Next</a>'
    });
});

<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick.css" rel="stylesheet"/>
<div class="test">
    <div class="prev_next"></div>
    <div class="option">
        <p>Test</p>
    </div>
    <div class="option">
        <p>Test</p>
    </div>
</div>
<div class="test">
    <div class="prev_next"></div>
    <div class="option">
        <p>Test</p>
    </div>
    <div class="option">
        <p>Test</p>
    </div>
</div>
<div class="test">
    <div class="prev_next"></div>
    <div class="option">
        <p>Test</p>
    </div>
    <div class="option">
        <p>Test</p>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kenwheeler/slick/master/slick/slick.min.js"></script>

如果没有这样的东西，Slick.js 会崩溃并产生一大堆损坏的上一个/下一个链接:http://jsfiddle.net/frank_o/Lr30ngo1/3/

这是只有一个 .test div 的预期输出:http://jsfiddle.net/frank_o/Lr30ngo1/6/

Answer 1

看起来您不需要预先创建 jQuery 集合，而只需将选择器字符串作为 slide 和 appendArrows 的值传递

您还需要唯一地标识 prev_next 容器和选项，因为 slick 需要一个选择器，而不是这些参数的元素/集合。

在此处查看固定的 jsFiddle:http://jsfiddle.net/81t4pkfa/2/

固定代码如下:(此版本使用您的原始标记，并动态为每个轮播分配 ID 以保持其“干净”)

$('.test').each(function (idx, item) {
   var carouselId = "carousel" + idx;
   this.id = carouselId;
   $(this).slick({
       slide: "#" + carouselId +" .option",
       appendArrows: "#" + carouselId + " .prev_next",
       prevArrow: '<a>Previous</a>',
       nextArrow: '<a>Next</a>'
   });
});

.prev_next a { display: inline-block; width:80px; text-align:center; margin: 2px; border: 0; padding: 4px; background-color: #666; color: #fff; }

<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick.css" rel="stylesheet"/>
<div class="test">
<div class="prev_next"></div>
<div class="option">
    <p>Test</p>
</div>
<div class="option">
    <p>Test</p>
</div>
</div>
<div class="test">
<div class="prev_next"></div>
<div class="option">
    <p>Test</p>
</div>
<div class="option">
    <p>Test</p>
</div>
</div>
<div class="test">
<div class="prev_next"></div>
<div class="option">
    <p>Test</p>
</div>
<div class="option">
    <p>Test</p>
</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kenwheeler/slick/master/slick/slick.min.js"></script>