时间戳

首页 > 解决方案 > jquery slick.js 滑块和基于数据属性的过滤

jquery - jquery slick.js 滑块和基于数据属性的过滤

问题描述

在获得光滑滑块的过滤能力以处理数据属性时遇到了一些麻烦。

html：

<div id="slider2">
    <div data-test-id="1">
        <img src="test.jpg" title="test" alt="test" height="120">
    </div>
    <div data-test-id="1">
        <img src="test.jpg" title="test" alt="test" height="120">
    </div>
    <div data-test-id="5">
        <img src="test.jpg" title="test" alt="test" height="120">
    </div>
</div>

js：（当然在滑块初始化之后）

$('#slider2').slick('slickFilter','[data-test-id="1"]');

当显然有两个幻灯片具有data-test-id="1". 如果我运行$('#slider2').slick('slickUnfilter');所有幻灯片，它们应该返回。

我想我需要更多关于 slick 如何执行过滤的详细信息，但文档中没有太多关于此的内容。它给出了示例$('.filtering').slick('slickFilter',':even');，但这并没有真正帮助我，因为我需要使用数据属性。它只是说在调用它时使用“选择器或函数”，它使用 jquery .filter()。

标签： jqueryslick.js

解决方案

让它与一些试验/错误和一些变化一起工作。

html：

<div id="slider2">
    <div class="slickSlide" data-test-id="1">
        <img src="test.jpg" title="test" alt="test" height="120">
    </div>
    <div class="slickSlide" data-test-id="1">
        <img src="test.jpg" title="test" alt="test" height="120">
    </div>
    <div class="slickSlide" data-test-id="5">
        <img src="test.jpg" title="test" alt="test" height="120">
    </div>
</div>

js：

$('#slider2').slick('slickFilter', function() {
    return $(this).find('.slickSlide').attr("data-test-id") == "1";
});

推荐阅读