javascript - Slick Slider 按类过滤而不是 :even

Question

这是来自光滑 slider 的代码，用于过滤 div。我在网上找不到任何解决方案，也没有自己管理将':even'更改为类名。

这是下面的代码:

var filtered = false;

$('.js-filter').on('click', function(){
  if (filtered === false) {
    $('.filtering').slick('slickFilter',':even');
    $(this).text('Unfilter Slides');
    filtered = true;
  } else {
    $('.filtering').slick('slickUnfilter');
    $(this).text('Filter Slides');
    filtered = false;
  }
});

':even' 部分是否可以更改为类名？除了':even' 部分，我需要的代码完全一样。谁能帮帮我？

Answer 1

是的，只需将 :even 替换为光滑 slider 项目的类名即可。重要的是，光滑的 slider 项目是您的 slider 元素的直接子元素，这样才能起作用。例如:

<div class="my-slick-slider">
  <div class="item dog"><!-- YOUR ELEMENT --></div>
  <div class="item dog"><!-- YOUR ELEMENT --></div>
  <div class="item cat"><!-- YOUR ELEMENT --></div>
  <div class="item cat"><!-- YOUR ELEMENT --></div>
</div>

将 slider 项目的内容放在项目 div 中。然后您可以通过简单地创建一个 javascript 函数来过滤，该函数按类名过滤光滑的 slider :

const filterByClassname = (classname) => {
  $('.filtering').slick('slickUnfilter');
  $('.my-slick-slider').slick('slickFilter', `.${classname}`);
});

// filter by classname "cat"
filterByClassname("cat");

这里有两件重要的事情: - 注意你必须在类名前加上一个点。 jquery 函数 filter 需要一个 css 选择器作为输入。 - 注意使用 .slick('slickUnfilter'); 您可以重新设置 slider 的过滤。我建议在应用新过滤器之前始终这样做。

希望对您有所帮助!这是一个应用了过滤的功能齐​​全的 codepen 示例:CODEPEN