Javascript JQuery过滤器库：合并两个过滤器？

我正在建立一个信息卡库，带有两个过滤器。一个过滤器用于日，另一个过滤器用于类别。页面内容应根据用户的选择进行更改

这些过滤器目前是独立工作的，我不知道如何将它们结合起来以获得无缝过滤体验

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

第二个问题是，单击“全部显示”时，不透明度效果不会出现

JS用于过滤卡片

JS用于按钮上的不透明度效果

我把网页放在主机上

首先，这里是一个例子

我所做的是使用变量、

category

和

day

分别保存所选的category和day过滤器值。这不是依赖于每个滤芯上是否存在

。选定的
类

这样做的好处首先是不需要同时使用
.selected
类，其次意味着您的UI状态不会持久化到DOM中

我还删除了所有用于添加和删除
.ACTIVE
和
.PASSIVE
类的代码，并将其与过滤器
单击事件监听器相结合。它避免了重复，使一切都更加整洁

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

如果你有任何问题，请提问

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

请将此示例简化为一个仅显示您请求帮助的问题的示例，并对您试图解决的问题给出比“它未按预期进行过滤”更清晰的描述。上次我简化代码时，另一位用户要求我显示更多内容。你能看看代码笔吗？真的，如果你到处点击，你就会看到问题所在。否则，我无法告诉你问题是什么，因此我来这里的原因。请修改你的标题，使之成为一个信息更丰富的问题。滚动浏览数千个问题，该领域的专家一定会仔细查看涉及“怪异”或其他观点或非描述性细节的问题。查看是否有效。我单击“关注人物”，仅显示类为“sort-button3”的元素。您能帮助演示/澄清问题吗？问题似乎是两个过滤器（comptency和day）独立运行。一个筛选器的值基本上由另一个筛选器重置。解决方案是将每个筛选器值持久化为一个变量，并使用
filterCards（）
函数中的变量。我现在没有时间写答案，但如果没有其他人这样做，可以稍后再写。
// 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' );    
});

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