jQuery +平滑过滤

时间:2018-08-26 23:35:33

标签: javascript pug slick-slider

使用Slick Carousel进行过滤时遇到一些问题。过滤器会正确过滤,但似乎还会打乱“ next”和“ prev”箭头。我尝试使用Slick的内置appendArrow方法移动箭头,因为我认为它们可能会陷入过滤中,但是无论我将它们放在页面的什么位置,它们仍然消失。我有99%的把握是,基于此的固有.filter()功能给我带来了问题,

"Note: When a CSS selector string is passed to .filter(), text and comment 
 nodes will always be removed from the resulting jQuery object during the 
 filtering process. When a specific node or array of nodes are provided, a text 
 or comment node will be included in the resulting jQuery object only if it 
 matches one of the nodes in the filtering array."

有办法防止这种情况发生吗?

链接到屏幕截图之前/之后: https://imgur.com/a/xIdN3tN

您会在标记中注意到按钮消失

JS

    //- Initialize Slick
script.
    $('.slick-carousel').slick({
      infinite: true,
      slidesToShow: 4,
      slidesToScroll: 4,
      variableWidth: true,
      arrows: true,
      accessibility: true
  });

  var filtered = false;

//- Filter script

script.
    $('.item-filter').on('click', function() {
      if (filtered === false) {
        $('.slick-carousel').slick('slickFilter','div:contains("test")');
        $(this).text('Unfilter Slides');
        filtered = true;
      } else {
        $('.slick-carousel').slick('slickUnfilter');
        $(this).text('Filter Slides');
        filtered = false;
      }
    });

光滑的JS

    Slick.prototype.filterSlides = Slick.prototype.slickFilter = function(filter) {

    var _ = this;

    if (filter !== null) {

        _.$slidesCache = _.$slides;

        _.unload();

        _.$slideTrack.children(this.options.slide).detach();

        _.$slidesCache.filter(filter).appendTo(_.$slideTrack);

        _.reinit();

    }

};

PUG

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

0 个答案:

没有答案