Question

这是一个用于滑动滑块的HTML：

<div class="slick">
    <div class="black phone"></div>
    <div class="white phone"></div>
    <div class="green phone"></div>
    <div class="black ipad"></div>
    <div class="white ipad"></div>
    <div class="green ipad"></div>
    <div class="black tablet"></div>
    <div class="white tablet"></div>
    <div class="green tablet"></div>
</div>

我需要按颜色（黑色，白色，绿色）和设备（手机，iPad，平板电脑）进行过滤。因此，例如，需要按.white和.tablet的类名进行过滤。过滤格式为：“颜色”和“设备”。它是动态的，而不是静态的。请指教。任何帮助将不胜感激。感谢。

Answer 1

这实际上非常简单。

由于光滑使用jquery＆＃39; .filter() http://api.jquery.com/filter/，您可以在单个字符串中使用多个类选择器。只需使用逗号加入要保留的类即可。

     let slidesToKeep = ['.green.tablet', '.green.phone', '.ipad'].join(',');
     // slidesToKeep now equals '.green.tablet,.green.phone,.ipad'
     $('.slick').slick('slickFilter', slidesToKeep);

我已经创建了一个codepen演示版，因此您可以添加任意数量的过滤器：Slick Carousel multiple filter demo。

修改文字链接

使用文本链接而不是选择框非常简单。你可以在文本链接上使用点击监听器。

添加如下文字：

<span class="color-filter" data-value=".black">black</span>
<span class="color-filter" data-value=".white">white</span>
<span class="color-filter" data-value=".green">green</span>

点击监听器：

$('form.filter span').on('click', function() {
    var filterClass = $(this).data('value')
    $('.slick').slick('slickUnfilter')
    $('.slick').slick('slickFilter', filterClass)
});

我将原始代码笔分叉以显示它正常工作...... https://codepen.io/timrross/pen/JxyVjE

Answer 2

可以使用光滑滑块过滤多个条件。您需要在一个条件中过滤所有条件。

let slidesToKeep = ['.green.tablet', '.green.phone', '.ipad'];
$slickSlider.slick('slickFilter', String(slidesToKeep));

Answer 3

这是不可能的。光滑的滑块不支持这种过滤。

jQuery Slick Slider过滤多个条件

3 个答案: