jQuery函数optimalize（光滑滑块）

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

试试这个。

// 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(); 
 
    }); 
 
    
 
}); 
 

 

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); 
}