Shuffle.js多筛选功能实现问题求助

问题核心 #

使用Shuffle.js实现多筛选功能时，仅能单个筛选器生效，无法同时基于data-solution和region筛选，且需要支持未来添加更多筛选项。

问题原因分析 #

1. 单选组逻辑错误：solution和region都是单选控件组（name属性相同），但原代码用数组存储选中值，单选组每次仅能选中一个选项，数组存储会导致旧值未清空、逻辑混乱。
2. 大小写不匹配：region单选控件的value是小写europe/us，但元素data-region值为大写Europe/US，导致匹配失败。
3. 代码冗余：两个筛选器的处理逻辑重复，且未针对"All"选项做清空筛选的特殊处理。
4. 初始化警告：Shuffle初始化时指定了sizer参数，但HTML中无.js-shuffle-sizer元素，会影响功能稳定性。

解决方案 #

1. 调整HTML细节 #

• 修正region单选控件的label关联（原label的for属性与input的id不匹配）
• 统一region的value值与data-region的大小写，避免匹配失败
• 可选：添加Shuffle布局所需的sizer元素（用于瀑布流布局优化）

2. 重构JS逻辑 #

• 用单个变量存储单选组的选中值，替代数组存储
• 编写通用筛选函数，统一处理所有筛选条件
• 针对"All"选项实现清空筛选的逻辑
• 修复Shuffle初始化的sizer参数问题

修改后的完整代码 #

HTML部分

<script src="https://cdnjs.cloudflare.com/ajax/libs/Shuffle/5.2.1/shuffle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<div id="product_archive">
  <div class="container white_bg">
    <div class="filters_container">
      <!-- 解决方案筛选组 -->
      <div class="btn-group btn-group-toggle" data-toggle="buttons" id="solution-options">
        <label class="btn btn-outline-primary active">
          <input type="radio" class="input-none" name="shuffle-filter" value="all" checked>
          <div class="filter_option_solution"><div class="image_div"></div>All</div>
        </label>
        <label class="btn btn-outline-primary">
          <input type="radio" class="input-none" name="shuffle-filter" value="Broiler Lighting">
          <div class="filter_option_solution"><div class="image_div"></div>Broilers</div>
        </label>
        <label class="btn btn-outline-primary">
          <input type="radio" class="input-none" name="shuffle-filter" value="Layer Lighting">
          <div class="filter_option_solution"><div class="image_div"></div>Layers</div>
        </label>
        <label class="btn btn-outline-primary">
          <input type="radio" class="input-none" name="shuffle-filter" value="Breeder Lighting">
          <div class="filter_option_solution"><div class="image_div"></div>Breeders</div>
        </label>
        <label class="btn btn-outline-primary">
          <input type="radio" class="input-none" name="shuffle-filter" value="Pullet lighting">
          <div class="filter_option_solution"><div class="image_div"></div>Pullet</div>
        </label>
        <label class="btn btn-outline-primary">
          <input type="radio" class="input-none" name="shuffle-filter" value="Swine Lighting">
          <div class="filter_option_solution"><div class="image_div"></div>Swine</div>
        </label>
      </div>

      <!-- 地区筛选组 -->
      <div class="region filter">
        <div class="region_group" id="region-options">
          <input type="radio" id="europe" name="region" value="Europe">
          <label for="europe">Europe</label>
          
          <input type="radio" id="us" name="region" value="US">
          <label for="us">US</label>
        </div>
      </div>
    </div>

    <!-- 产品网格 -->
    <div class="product_grid js-shuffle" id="product_grid">
      <!-- Shuffle布局sizer元素 -->
      <div class="product_grid_item js-shuffle-sizer"></div>
      
      <div class="product_grid_item shuffle-item" data-solutions='["Broiler Lighting","Layer Lighting","Pullet lighting","Swine Lighting"]' data-region='["Europe"]'>
        <div class="product_grid_item_container">
          <div class="image_product_item"></div>
          <a href="/test">Item1</a>
        </div>
      </div>
      <div class="product_grid_item shuffle-item" data-solutions='["Broiler Lighting","Layer Lighting","Swine Lighting"]' data-region='["US"]'>
        <div class="product_grid_item_container">
          <div class="image_product_item"></div>
          <a href="/test">Item2</a>
        </div>
      </div>
      <div class="product_grid_item shuffle-item" data-solutions='["Broiler Lighting"]' data-region='["US"]'>
        <div class="product_grid_item_container">
          <div class="image_product_item"></div>
          <a href="/test">Item3</a>
        </div>
      </div>
    </div>
  </div>
</div>

JS部分

const Shuffle = window.Shuffle;
const element = document.getElementById('product_grid');
const sizer = element.querySelector('.js-shuffle-sizer');

// 初始化Shuffle
const shuffleInstance = new Shuffle(element, {
  itemSelector: '.product_grid_item',
  sizer: sizer, // 不需要瀑布流可删除此行
  buffer: 1,
});

// 存储选中的筛选值
let selectedSolution = 'all';
let selectedRegion = null;

// 通用筛选函数
function applyFilters() {
  shuffleInstance.filter(function (itemElement) {
    // 解析元素的筛选数据
    const solutions = JSON.parse(itemElement.getAttribute('data-solutions'));
    const regions = JSON.parse(itemElement.getAttribute('data-region'));

    // 解决方案筛选逻辑：选all则通过，否则匹配选中方案
    const solutionPass = selectedSolution === 'all' || solutions.includes(selectedSolution);
    
    // 地区筛选逻辑：未选中则通过，否则匹配选中地区
    const regionPass = !selectedRegion || regions.includes(selectedRegion);

    // 同时满足两个条件才显示
    return solutionPass && regionPass;
  });
}

// 解决方案筛选事件
jQuery('input[name="shuffle-filter"]').on('change', function () {
  selectedSolution = this.value;
  applyFilters();
});

// 地区筛选事件
jQuery('input[name="region"]').on('change', function () {
  selectedRegion = this.checked ? this.value : null;
  applyFilters();
});

扩展说明 #

未来添加更多筛选项时，只需：

1. 添加对应的筛选控件（单选/多选均可，多选需用数组存储选中值）
2. 在applyFilters函数中添加对应筛选逻辑
3. 给产品元素添加对应的data-*属性

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