jQuery Slick Slider 过滤多个条件答案

【问题标题】：jQuery Slick Slider filtering with multiple conditionsjQuery Slick Slider 过滤多个条件
【发布时间】：2016-12-12 15:31:56
【问题描述】：

这是一个光滑滑块的 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 的类名进行过滤。过滤器格式为：“颜色”和“设备”。它是动态的，而不是静态的。请给我建议。任何帮助将不胜感激。谢谢。

【问题讨论】：

标签： javascript jquery slider

【解决方案1】：

这其实很简单。

由于 slick 只使用 jquery 的 .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

【讨论】：

谢谢你，这几乎正是我正在寻找的！我想做的一件事是使用链接而不是选择字段。所以只有黑色、绿色和白色的链接，点击它会改变滑块。这可能吗？
我已经用代码更新了我的原始答案，改为使用文本链接。
嗨蒂姆，我知道这是一篇旧帖子，但是当从下拉列表中选择 ALL 时，我们如何重置过滤器？目前，选择此项时没有任何显示。我需要将初始选项值保持为空（value=""），我只是在寻找一种方法来在选择此选项时重置表单选项。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

这是不可能的。 Slick 滑块不支持此类过滤。

【讨论】：

您是否碰巧找到了解决方案或解决方法？我在同一条船上。