Question

我制作了一个带有一些滤镜功能的光滑滑块。

一切正常，但我对过滤器的功能并不像我希望的那样高效。有谁知道如何提高效率？

// init Isotope
var slickoptions = {
      rows: 2,
      dots: true,
      appendDots: $('.slick-nav'),
      appendArrows: $('.slick-nav'),
      accessibility: true,
      speed: 300,
      slidesToShow: 3,
      slidesToScroll: 3,
      infinite: false,
}

$(document).ready(function () {
  $('.slider2').slick(slickoptions);

  var slider = $('.slider2');
  var allSlides = $('.slick-slide > div > *').clone();
  var trigger = $('js-filter');

  $('.filter-all').on('click', function () {
        $('.active').removeClass('active');
        $('.filter-all').addClass('active');
        var filterSlides = allSlides.filter('*');
        slider.slick('unslick').empty().append(filterSlides).slick(slickoptions);
  });

    $('.js-filter[data-filter=".category-website"]').on('click', function () {
        $('.active').removeClass('active');
        $('.js-filter[data-filter=".category-website"]').addClass('active');
        var filterSlides = allSlides.filter('.category-website');
        slider.slick('unslick').empty().append(filterSlides).slick(slickoptions);
    });

    $('.js-filter[data-filter=".category-webshop"]').on('click', function () {
        $('.active').removeClass('active');
        $('.js-filter[data-filter=".category-webshop"]').addClass('active');
        var filterSlides = allSlides.filter('.category-webshop');
        slider.slick('unslick').empty().append(filterSlides).slick(slickoptions);
    });

    $('.js-filter[data-filter=".category-drukwerk"]').on('click', function () {
        $('.active').removeClass('active');
        $('.js-filter[data-filter=".category-drukwerk"]').addClass('active');
        var filterSlides = allSlides.filter('.category-drukwerk');
        slider.slick('unslick').empty().append(filterSlides).slick(slickoptions);
    });

    $('.js-filter[data-filter=".category-videos"]').on('click', function () {
        $('.active').removeClass('active');
        $('.js-filter[data-filter=".category-videos"]').addClass('active');
        var filterSlides = allSlides.filter('.category-videos');
        slider.slick('unslick').empty().append(filterSlides).slick(slickoptions);
    });

    $('.js-filter[data-filter=".category-bestaat-niet"]').on('click', function () {
        $('.active').removeClass('active');
        $('.js-filter[data-filter=".category-bestaat-niet"]').addClass('active');
        var filterSlides = allSlides.filter('.category-bestaat-niet');
        slider.slick('unslick').empty().append(filterSlides).slick(slickoptions);
    });

});

http://codepen.io/Pondake/pen/vxVQam

Answer 1

试试这个。

＆＃13;

// init Isotope
var slickoptions = {
      rows: 2,
      dots: true,
      appendDots: $('.slick-nav'),
      appendArrows: $('.slick-nav'),
      accessibility: true,
      speed: 300,
      slidesToShow: 3,
      slidesToScroll: 3,
      infinite: false,
}

$(document).ready(function () {
  $('.slider2').slick(slickoptions);

  var slider = $('.slider2');
  var allSlides = $('.slick-slide > div > *').clone();
  var trigger = $('js-filter');

  
  var ClassFilter = function (object, item) {
      this.object = object;
      this.item = item;
    
      this.filterFunc = function () {
        $('.active').removeClass('active');
        $('.js-filter[data-filter="'+this.item+'"]').addClass('active');
        var filterSlides = allSlides.filter(this.item);
        slider.slick('unslick').empty().append(filterSlides).slick(slickoptions);
      }
  }
  
  jQuery('.js-filter').on('click', function (e) {
    var attr = jQuery(this).attr('data-filter')
    var newFilter = new ClassFilter(this, attr);
        newFilter.filterFunc();
  });
  
});

＆＃13;

Answer 2

以防您不需要在逻辑中使用每个过滤器，只需要特定定义的过滤器（如开关中所示）。

 $('.js-filter').on('click', function () {
   $('.active').removeClass('active');
   var filterSlides;

   switch($(this).data("filter")) { 
      case ".category-website":
          filterSlides = runSlideLogic(".category-website");
          break;
       // rest of them here
   }

   slider.slick('unslick').empty().append(filterSlides).slick(slickoptions);
});

function runSlideLogic(className) {
   $('.js-filter[data-filter="' + className + '"]').addClass('active');
   return allSlides.filter(className);
}

Jquery函数最优化（光滑滑块）

2 个答案: