基于jQuery Isotope实现多条件筛选功能的技术咨询

I see the issue with your current setup: right now, clicking a filter link replaces the entire Isotope filter selector, so you can't combine multiple categories or age groups. Let's fix that to support multi-selection across both filter groups, plus proper "Show All" functionality.

Step 1: Update the Filter HTML #

First, add unique classes to each filter group so we can target them separately:

<ul class="filter filter-category list-inline">
  <li><a class="active" href="#" data-filter="*">Show All</a></li>
  <li><a href="#" data-filter=".Education"><i class="fa fa-book" style="color:#bbbbbb"></i> Jain Education</a></li>
  <li><a href="#" data-filter=".Lifestyle"><i class="fa fa-hand-holding-heart" style="color:#bbbbbb"></i> Lifestyle</a></li>
  <li><a href="#" data-filter=".Career"><i class="fa fa-briefcase" style="color:#bbbbbb"></i> Career & Networking</a></li>
  <li><a href="#" data-filter=".DiversityInclusion"><i class="fa fa-globe" style="color:#bbbbbb"></i> Diversity & Inclusion</a></li>
  <li><a href="#" data-filter=".SocialIssues"><i class="fa fa-handshake" style="color:#bbbbbb"></i> Current Events & Social Issues</a></li>
</ul>
<ul class="filter filter-age list-inline">
  <li><a class="active" href="#" data-filter="*">Show All</a></li>
  <li><a href="#" data-filter=".HS">High School</a></li>
  <li><a href="#" data-filter=".College">College</a></li>
  <li><a href="#" data-filter=".JNF">JNF</a></li>
</ul>

Step 2: Replace the Isotope JavaScript #

This updated code tracks selected filters for each group, handles multi-selection, and combines filters correctly:

/*-------------------------------------------------*/
/* = portfolio isotope
/*-------------------------------------------------*/
var winDow = $(window);
// Needed variables
var $container = $('.iso-call');
var $filterCategory = $('.filter-category');
var $filterAge = $('.filter-age');

// Track selected filters for each group
var selectedCategory = ['*'];
var selectedAge = ['*'];

try {
  $container.imagesLoaded(function () {
    $container.trigger('resize');
    $container.isotope({
      filter: '*',
      layoutMode: 'masonry',
      animationOptions: {
        duration: 750,
        easing: 'linear'
      }
    });

    $('.triggerAnimation').waypoint(function () {
      var animation = $(this).attr('data-animate');
      $(this).css('opacity', '');
      $(this).addClass("animated " + animation);
    }, { offset: '75%', triggerOnce: true });

    // Fixed invalid setTimeout syntax
    setTimeout(function() {}, 1500);
  });
} catch (err) {
  console.error('Isotope init error:', err);
}

// Update layout on window resize
winDow.bind('resize', function () {
  updateIsotopeFilter();
  return false;
});

// Combine filters and update Isotope
function updateIsotopeFilter() {
  var categorySelector = selectedCategory.join(', ');
  var ageSelector = selectedAge.join(', ');
  var combinedFilter;

  // Handle different filter combinations
  if (categorySelector === '*' && ageSelector === '*') {
    combinedFilter = '*';
  } else if (categorySelector === '*') {
    combinedFilter = ageSelector;
  } else if (ageSelector === '*') {
    combinedFilter = categorySelector;
  } else {
    // Use :is() for modern browsers (OR within groups, AND between groups)
    combinedFilter = ':is(' + categorySelector + '):is(' + ageSelector + ')';
    // Uncomment below for older browser fallback (generates all class combinations)
    // var categoryArray = categorySelector.split(', ');
    // var ageArray = ageSelector.split(', ');
    // var combinations = [];
    // categoryArray.forEach(cat => ageArray.forEach(age => combinations.push(cat + age)));
    // combinedFilter = combinations.join(', ');
  }

  try {
    $container.isotope({
      filter: combinedFilter,
      animationOptions: {
        duration: 750,
        easing: 'linear',
        queue: false
      }
    });
  } catch (err) {
    console.error('Isotope filter update error:', err);
  }
}

// Handle Category Filter clicks
$filterCategory.find('a').click(function (e) {
  e.preventDefault();
  var $this = $(this);
  var filterVal = $this.attr('data-filter');

  if (filterVal === '*') {
    // Reset category filters to "Show All"
    selectedCategory = ['*'];
    $filterCategory.find('a').removeClass('active');
    $this.addClass('active');
  } else {
    // Toggle active state for the filter
    if ($this.hasClass('active')) {
      // Remove filter from selection
      selectedCategory = selectedCategory.filter(item => item !== filterVal);
      $this.removeClass('active');
      // Reset to "Show All" if no filters are selected
      if (selectedCategory.length === 0) {
        selectedCategory = ['*'];
        $filterCategory.find('a[data-filter="*"]').addClass('active');
      }
    } else {
      // Remove "Show All" from selection if present
      if (selectedCategory.includes('*')) {
        selectedCategory = selectedCategory.filter(item => item !== '*');
        $filterCategory.find('a[data-filter="*"]').removeClass('active');
      }
      // Add filter to selection
      selectedCategory.push(filterVal);
      $this.addClass('active');
    }
  }

  updateIsotopeFilter();
});

// Handle Age Filter clicks (mirrors category logic)
$filterAge.find('a').click(function (e) {
  e.preventDefault();
  var $this = $(this);
  var filterVal = $this.attr('data-filter');

  if (filterVal === '*') {
    // Reset age filters to "Show All"
    selectedAge = ['*'];
    $filterAge.find('a').removeClass('active');
    $this.addClass('active');
  } else {
    // Toggle active state for the filter
    if ($this.hasClass('active')) {
      // Remove filter from selection
      selectedAge = selectedAge.filter(item => item !== filterVal);
      $this.removeClass('active');
      // Reset to "Show All" if no filters are selected
      if (selectedAge.length === 0) {
        selectedAge = ['*'];
        $filterAge.find('a[data-filter="*"]').addClass('active');
      }
    } else {
      // Remove "Show All" from selection if present
      if (selectedAge.includes('*')) {
        selectedAge = selectedAge.filter(item => item !== '*');
        $filterAge.find('a[data-filter="*"]').removeClass('active');
      }
      // Add filter to selection
      selectedAge.push(filterVal);
      $this.addClass('active');
    }
  }

  updateIsotopeFilter();
});

Key Improvements Explained: #

• Multi-selection Support: You can now select multiple categories and multiple age groups. For example, selecting "Jain Education" + "Lifestyle" and "High School" + "College" will show items that fall into either category AND either age group.
• Proper "Show All" Behavior: Clicking "Show All" in either group clears all selections in that group and resets it to show all items for that category/age.
• Filter Combination Logic: Uses modern CSS :is() syntax to cleanly combine filters (with a fallback for older browsers if needed).
• State Tracking: Maintains active filter states correctly, so selected filters stay highlighted until you deselect them.
• Debugging: Added error logging to help troubleshoot any issues with Isotope initialization or filter updates.

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