jQuery筛选画廊：如何组合双筛选器并修复现有故障？

Let's tackle these two problems one by one to get your gallery working smoothly!

Problem 1: Broken Combined Filter (Focus on People + Any Day) #

The core issue here is that your code tries to filter by "Any Day" as if it's a specific day class, but your cards don't have that class. When users select "Any Day," we shouldn't apply a day filter at all—we just want to show all cards matching the selected category.

Here's the fixed filterCards function:

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

// Show all cards 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 $selectedDay = $dayFilters.filter('.selected'); 
  var $selectedCategory = $categoryFilters.filter('.selected'); 
  var filterClasses = []; 

  // Only add day filter if it's NOT "Any Day" (adjust 'all' to match your data-target value)
  if ($selectedDay.length && $selectedDay.data('target') !== 'all') {
    filterClasses.push('.' + $selectedDay.data('target'));
  }

  // Add category filter if a specific category is selected
  if ($selectedCategory.length && $selectedCategory.data('target') !== 'all') {
    filterClasses.push('.' + $selectedCategory.data('target'));
  }

  if (filterClasses.length > 0) { 
    var filter = filterClasses.join(''); 
    $cards.not(filter).hide(); 

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

Key Fixes: #

• Added checks to skip filtering for "Any Day" (assuming its data-target is set to all—adjust this value if your HTML uses something else like any).
• Fixed the array check to verify if we actually have filters to apply (instead of checking if the empty array exists).
• Renamed variables for better readability.

Problem 2: "Show All" Button Transparency Not Working #

This is almost certainly a case mismatch between your JavaScript class names and your CSS styles. Your current code uses uppercase classes (ACTIVE/PASSIVE), but CSS classes are typically lowercase—if your styles use .active/.passive, they won't match the uppercase classes your JS is adding.

Here's the cleaned-up button code with standard lowercase classes:

// Set initial state with lowercase classes
$('#buttonAll').addClass('active');
$('#button1, #button2, #button3, #button4').addClass('passive');

// Reusable function to avoid repetitive code
function setActiveButton(activeButtonId) {
  // Reset all buttons to passive state
  $('#buttonAll, #button1, #button2, #button3, #button4')
    .removeClass('active')
    .addClass('passive');
  
  // Set the selected button to active
  $(activeButtonId).removeClass('passive').addClass('active');
  
  // Update gallery filters when a button is clicked
  filterCards();
}

// Attach click handlers
$('#buttonAll').click(function() {
  setActiveButton('#buttonAll');
});

$('#button1').click(function() {
  setActiveButton('#button1');
});

$('#button2').click(function() {
  setActiveButton('#button2');
});

$('#button3').click(function() {
  setActiveButton('#button3');
});

$('#button4').click(function() {
  setActiveButton('#button4');
});

Key Fixes: #

• Switched to lowercase active/passive classes to match standard CSS conventions (adjust back to uppercase only if your styles explicitly use uppercase class names).
• Created a reusable setActiveButton function to eliminate redundant code—this makes your script easier to update and maintain.
• Added a call to filterCards() so clicking these buttons triggers a gallery refresh (adjust if these buttons aren't tied to your filter logic).

内容的提问来源于stack exchange，提问作者Matie