JQuery 过滤器库：组合两个过滤器？ [关闭]

Question

我正在构建一个包含两个过滤器的信息卡片库。一个过滤器用于日期，另一个过滤器用于类别。页面内容应根据用户的选择而变化。

过滤器目前是独立工作的，我不知道如何组合它们以获得无缝的过滤体验。

第一个故障发生在您同时选择“关注人”和“任何一天”时。您必须单击按钮几次才能看到故障。过滤器不显示“关注人”和“任何一天”独有的课程。它显示了实际上不应该存在的类别。

第二个故障，当你点击“显示全部”时，不出现不透明效果。

JS 用于过滤卡片

var $cards = $('.class-card');
var $dayFilters = $('.dayFilter');
var $categoryFilters = $('.categoryFilter');
var $noResults = $('#noResults');

// Show all days on page load 
$cards.show();
// Hide the no results message
$noResults.hide();

$categoryFilters.on('click', function(e){
  var $category = $(e.target);

  $categoryFilters.removeClass('selected');
  $category.addClass('selected')

  filterCards();
});

$dayFilters.on('click', function(e){
  var $day = $(e.target);

  $dayFilters.removeClass('selected');
  $day.addClass('selected')

  filterCards();
});

function filterCards () {
  $cards.show();
  $noResults.hide();

  var $day = $dayFilters.filter('.selected');
  var $category = $categoryFilters.filter('.selected');
  var filterClasses = [];

  if ($day.length) filterClasses.push('.'+ $day.data('target'));
  if ($category.length) filterClasses.push('.'+ $category.data('target'));

  if (filterClasses) {
      var filter = filterClasses.join('');

      $cards.not(filter).hide();

      if (!$cards.filter(filter).length) {
        $noResults.show();
      }

  }
}

JS 用于按钮的不透明效果

// By default, "View All" is the active button
$('#buttonAll').addClass( 'ACTIVE' );
$('#button1').addClass( 'PASSIVE' );
$('#button2').addClass( 'PASSIVE' );
$('#button3').addClass( 'PASSIVE' );
$('#button4').addClass( 'PASSIVE' );
// When user chooses, "buttonAll", make it stand-out
$('#buttonAll').click(function() {
    $('#buttonAll').removeClass( 'PASSIVE' ).addClass( 'ACTIVE' );
    $('#button1').removeClass( 'ACTIVE' ).addClass( 'PASSIVE' );
    $('#button2').removeClass( 'ACTIVE' ).addClass( 'PASSIVE' );
    $('#button3').removeClass( 'ACTIVE' ).addClass( 'PASSIVE' );
    $('#button4').removeClass( 'ACTIVE' ).addClass( 'PASSIVE' );    
});
// When user chooses, "button1", make it stand-out
$('#button1').click(function() {
    $('#buttonAll').removeClass( 'ACTIVE' ).addClass( 'PASSIVE' );
    $('#button1').removeClass( 'PASSIVE' ).addClass( 'ACTIVE' );
    $('#button2').removeClass( 'ACTIVE' ).addClass( 'PASSIVE' );
    $('#button3').removeClass( 'ACTIVE' ).addClass( 'PASSIVE' );
    $('#button4').removeClass( 'ACTIVE' ).addClass( 'PASSIVE' );    
});
// When user chooses, "button2", make it stand-out
$('#button2').click(function() {
    $('#buttonAll').removeClass( 'ACTIVE' ).addClass( 'PASSIVE' );
    $('#button1').removeClass( 'ACTIVE' ).addClass( 'PASSIVE' );
    $('#button2').removeClass( 'PASSIVE' ).addClass( 'ACTIVE' );
    $('#button3').removeClass( 'ACTIVE' ).addClass( 'PASSIVE' );
    $('#button4').removeClass( 'ACTIVE' ).addClass( 'PASSIVE' );    
});
// When user chooses, "button3", make it stand-out
$('#button3').click(function() {
    $('#buttonAll').removeClass( 'ACTIVE' ).addClass( 'PASSIVE' );
    $('#button1').removeClass( 'ACTIVE' ).addClass( 'PASSIVE' );
    $('#button2').removeClass( 'ACTIVE' ).addClass( 'PASSIVE' );
    $('#button3').removeClass( 'PASSIVE' ).addClass( 'ACTIVE' );
    $('#button4').removeClass( 'ACTIVE' ).addClass( 'PASSIVE' );    
});
// When user chooses, "button4", make it stand-out
$('#button4').click(function() {
    $('#buttonAll').removeClass( 'ACTIVE' ).addClass( 'PASSIVE' );
    $('#button1').removeClass( 'ACTIVE' ).addClass( 'PASSIVE' );
    $('#button2').removeClass( 'ACTIVE' ).addClass( 'PASSIVE' );
    $('#button3').removeClass( 'ACTIVE' ).addClass( 'PASSIVE' );
    $('#button4').removeClass( 'PASSIVE' ).addClass( 'ACTIVE' );    
});

我的页面托管在CodePen。

Answer 1

首先，这是一个new working CodePen。

我所做的是使用变量category 和day 分别保存所选类别和日期过滤器值。这不是依赖于每个过滤器元素上出现的.selected 类的存在。

这样做的好处首先是不再需要 .selected 类，其次它意味着您的 UI 状态不会保留在 DOM 本身中。

我还删除了所有用于添加和删除 .ACTIVE 和 .PASSIVE 类的代码，而是将其与过滤器 click 事件侦听器结合使用。它避免了重复，并使所有内容都更加整洁。

最后，我添加了大量的 cmets，希望能解释每个步骤发生的情况，以便您了解它是如何工作的。

如果您有任何问题，请提出。

// Prepare cards, filters, and no results message
var $cards = $('.class-card');
var $dayFilters = $('.dayFilter');
var $categoryFilters = $('.categoryFilter');
var $noResults = $('#noResults');

// Initialise by calling filter cards
filterCards();

// Prepare selected category and day filter values
var category = null;
var day = null;

// Bind click event to set selected category filter
$categoryFilters.on('click', function (e) {
  // Get clicked category filter
  var $category = $(e.target);

  // Deselect all categories, and select clicked category
  $categoryFilters.addClass('PASSIVE').removeClass('ACTIVE');
  $category.addClass('ACTIVE').removeClass('PASSIVE');

  // Record clicked category filter value
  category = $category.data('target');

  filterCards();
});

// Bind click event to set selected day filter
$dayFilters.on('click', function (e) {
  // Get clicked day filter
  var $day = $(e.target);

  // Deselect all days, and select clicked day
  $dayFilters.addClass('PASSIVE').removeClass('ACTIVE');
  $day.addClass('ACTIVE').removeClass('PASSIVE');

  // Record clicked day filter value
  day = $day.data('target');

  filterCards();
});

function filterCards() {
  // Show all cards and hide no results message
  $cards.show();
  $noResults.hide();

  // Reset filter classes
  var filters = [];

  // Add category and day filter classes, where selected
  if (category) filters.push('.' + category);
  if (day) filters.push('.' + day);

  // Filter cards where one or more filters selected
  if (filters.length) {
    // Hide cards that do not match filters
    $cards.not(filters.join('')).hide();

    // Show no results message if no cards are visible
    if ($cards.has(':visible').length === 0) $noResults.show();
  }
}