Isotope筛选问题：重置至默认选项时项目全部隐藏

First, let's tackle the main problem: when selecting "All Services" and "All Sectors", all items disappear. This is caused by how your filter selector is being constructed.

The Filter Logic Bug #

Right now, when both dropdowns are set to their "All" options (which I assume have data-filter-value="*"), your code joins these two * values into a selector like "**". Isotope doesn't recognize this as a valid CSS selector, so no items match—hence everything is hidden.

Here's how to fix the filter handling in your Isotope.js file:

// Select Filters
$(function() {
  var $container = $('.grid'),
      $select = $('div#filterGroup select');
  filters = {};

  $container.isotope({ itemSelector: '.grid-item' });

  $select.change(function() {
    var $this = $(this);
    var group = $this.attr('data-filter-group');
    filters[group] = $this.find('option:selected').attr('data-filter-value');

    var isoFilters = [];
    for (var prop in filters) {
      var filterVal = filters[prop];
      // Only include filters that aren't the "All" wildcard
      if (filterVal !== '*') {
        isoFilters.push(filterVal);
      }
    }

    // If no specific filters are active, use "*" to show all items
    var selector = isoFilters.length > 0 ? isoFilters.join('') : '*';
    $container.isotope({ filter: selector });

    return false;
  });

  $grid.imagesLoaded().progress( function() {
    $grid.isotope('layout');
  });
});

This code ignores wildcard * values when building the selector. If both filters are set to "All", the selector becomes * (show everything). If one is specific and the other is "All", it uses just the specific filter. If both are specific, it combines them correctly (e.g., .web-design.healthcare).

jQuery & Enqueuing Issues #

Now let's address your jQuery concerns and script registration problems:

1. Missing Isotope Library Registration
   In your functions.php, you have isotope as a dependency for isotope-init, but you never registered the actual Isotope library. WordPress will throw an error here because it can't find the isotope script. Add this to your add_isotope function:

   // Register Isotope library from CDN
   wp_register_script( 'isotope', 'https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.min.js', array('jquery'), '3.0.6', true );
   

   Keeping it as a dependency for isotope-init will auto-enqueue it when needed.

2. jQuery Version Mismatch
   Your modify_jquery function loads jQuery 2.1.3 but labels it as version 3.2.1. This can cause dependency conflicts. Fix the version number to match the URL, or use a newer, stable version like 3.6.0:

   function modify_jquery() {
     if ( !is_admin() ) {
       wp_deregister_script( 'jquery' );
       // Use a compatible, up-to-date jQuery version
       wp_register_script( 'jquery', 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js', false, '3.6.0' );
       wp_enqueue_script( 'jquery' );
     }
   }
   // Use wp_enqueue_scripts instead of init for script modifications
   add_action( 'wp_enqueue_scripts', 'modify_jquery' );
   

   Using wp_enqueue_scripts instead of init is the correct hook for modifying frontend scripts.

3. Double Initialization of Isotope
   You initialize Isotope twice in your code: once at the top ($grid = $('.grid').isotope({...})) and again inside the filter block ($container.isotope({ itemSelector: '.grid-item' })). Remove the second initialization to avoid conflicts.

Summary of Changes #

• Fix the filter selector logic to handle "All" options correctly.
• Register the missing Isotope library in functions.php.
• Correct the jQuery version mismatch and use the proper hook for script modifications.
• Remove duplicate Isotope initialization.

These changes should resolve both the filter reset issue and potential jQuery conflicts.

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