用于过滤产品的Jquery

Question

我有这个过滤产品的jquery插件

 (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('[data-cat = "' + $filterColor + '"]')
            .addClass('is-animated').fadeIn();
        });
    }
  });

})(jQuery);

[data-cat]是类别 但有些产品属于多个类别，过滤器不适用于它们。如果该类别是您单击过滤器按钮的唯一类别（如果该产品有两个类别，例如，airtickets和ferry ticket单击inirtickets过滤器按钮doest显示此产品）它是有效的，它将不会显示项目包含其类别中的airtickets，而不仅仅包含仅包含airtickets的那些

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

Answer 1

可能你需要这样的东西：

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

Answer 2

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;