如何解决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"
的幻灯片时,要过滤的 js 会删除所有幻灯片。如果我运行 $('#slider2').slick('slickUnfilter');
,所有幻灯片都会按原样返回。
我想我需要更多关于如何执行过滤的详细信息,但文档中没有太多关于此的内容。它给出了示例 $('.filtering').slick('slickFilter',':even');
,但这并没有真正帮助我,因为我需要使用数据属性。它只是说在调用它时使用“选择器或函数”,它使用 jquery .filter()。
解决方法
通过一些试验/错误和一些更改让它工作。
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";
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。