问用于过滤产品的Jquery

EN

(function($) {

  'use strict';

  var $filters = $('.filter [data-filter]'),
    $boxes = $('.boxes [data-cat]');

  $filters.on('click', function(e) {
    e.preventDefault();
    var $this = $(this);
    
    $filters.removeClass('active');
    $this.addClass('active');

    var $filterColor = $this.attr('data-filter');
    
    if ($filterColor == 'all') {
      $boxes.removeClass('is-animated')
        .fadeOut().promise().done(function() {
          $boxes.addClass('is-animated').fadeIn();
        });
    } else {
      $boxes.removeClass('is-animated')
        .fadeOut().promise().done(function() {
          $boxes.filter(function(i,el){ 
              return el.dataset.cat.split(',').indexOf($filterColor)!==-1;
          })
            .addClass('is-animated').fadeIn();
        });
    }
  });

})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cta filter">
  <a class="blue-btn btn" data-filter="all" href="#" >All</a>
  <a class="blue-btn btn" data-filter="cat1" href="#" role="button">Cat1</a>
  <a class="blue-btn btn" data-filter="cat2" href="#" role="button">Cat2</a>
  <a class="blue-btn btn" data-filter="cat3" href="#" role="button">Cat3</a>


  <ul class="boxes">
    <li data-cat="cat1,cat2">cat1 & cat2</li>
    <li data-cat="cat2">cat2</li>
    <li data-cat="cat3">cat3</li>
  </ul>
</div>

(function($) {

  'use strict';

  var $filters = $('.filter [data-filter]'),
    $boxes = $('.boxes [data-cat]');

  $filters.on('click', function(e) {
    e.preventDefault();
    var $this = $(this);
    
    $filters.removeClass('active');
    $this.addClass('active');

    var $filterColor = $this.attr('data-filter');

    $boxes.each(function(index){
      var curCategories = $(this).data("cat").split(",");
      if( curCategories.indexOf( $filterColor ) === -1 ){
        // match not found
        $(this).removeClass("is-animated").fadeOut();
      }else{
        //match found
        $(this).addClass("is-animated").fadeIn();
      }
    });//each()   
  });

})(jQuery);

.boxes div
{
  background: orange;
  border-radius: 50%;
  color: #777;
  float: left;
  height: 80px;
  text-align: center;
  width: 80px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="cta filter">
  <a class="blue-btn btn" data-filter="all" href="#" >All</a>
  <a class="blue-btn btn" data-filter="Airtickets" href="#" role="button">Airtickets</a>
  <a class="blue-btn btn" data-filter="Ferry" href="#" role="button">Ferry</a>  
</div>

<div class="boxes">
 <div data-cat="Airtickets,all">Airtickets, all</div>
 <div data-cat="Airtickets,all">Airtickets, all</div>
 <div data-cat="Ferry,all">Ferry, all</div>
 <div data-cat="Airtickets,Ferry,all">Airtickets, Ferry, all</div>
 <div data-cat="all">all</div>
</div>