Question

我正在尝试使用CSS动画和jQuery在this article的帮助下构建一个过滤组件。我完全按照文章做了一切。但是，我试图对多个类别进行过滤。假设有多个类别，HTML标记如下所示：

<a class="red" data-category="red, green, blue" href="#">Box1</a>

在这种情况下，如何编写jQuery来过滤上面的html代码，其中data-category有多个类别。我不擅长jQuery。如果有人为我这样做，对我来说将是一个很大的帮助。 jQuery代码是：

(function($) {

  'use strict';

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

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

})(jQuery);

由于

Answer 1

在研究了Java Assignment Operators后，我得到了一个查询解决方案。在上面的jQuery代码中，只需在下面的行中添加 * = ：

$boxes.filter('[data-category *= "' + $filterColor + '"]')
            .addClass('is-animated').fadeIn();

这就像一个魅力！

如何使用jQuery过滤多个类别

1 个答案: