这里是 slick slider 的 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
的类名进行过滤。
过滤器格式为:“颜色”和“设备”。它是动态的,而不是静态的。
请给我建议。任何帮助将不胜感激。
谢谢。
最佳答案
这其实很简单。
因为 slick 只使用 jquery 的 .filter()
http://api.jquery.com/filter/ ,您可以在单个字符串中使用多类选择器。只需用逗号加入您想保留的类(class)即可。
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)
});
我 fork 了原始代码笔以显示其工作... https://codepen.io/timrross/pen/JxyVjE
关于javascript - 具有多个条件的 jQuery Slick Slider 过滤,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41104225/