Question

这是来自平滑滑块的代码，用于过滤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

Slick使用官方的.filter jQuery方法，您可以在这里找到文档：

http://api.jquery.com/filter/

我对JS还是很陌生，就像你一样，我不能只将一个类放在方法的选择器位置。我仍然对规则有些不满意，但是我确实通过使用以下方法取得了一些进展：

    $('.filtering').slick('slickFilter','div:contains("test")');

我不确定您的HTML是什么样的，但是我的如下（PUG格式）：

//- Carousel
.slick-carousel
  div
    .item
      img(src="images/test1.jpg").item-trigger
      .item-modal
        .item-modal-content
          span.item-close-button ×
          name test

这种作品，但它也使整个旋转木马，纽扣和所有东西都变得微不足道。还没有弄清楚那部分，但这也许会让您走上正确的路

Answer 2

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

<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>

将滑块项目的内容放入项目div中。然后，您可以通过简单地创建一个javascript函数来按类名过滤光滑滑块的方式进行过滤：

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

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

这里有2件重要的事情： -请注意，您必须在类名之前加一个点。 jQuery函数filter需要一个CSS选择器作为输入。 -请注意，您可以使用.slick('slickUnfilter');重新设置滑块的过滤条件。我建议始终在应用新过滤器之前这样做。

希望有帮助！以下是应用了过滤功能的功能齐全的Codepen示例：CODEPEN

滑动滑块过滤器按类而不是：even

2 个答案: