Shuffle.js 多条件联合过滤：实现解决方案与区域的双重筛选-js教程-PHP中文网

Shuffle.js 多条件联合过滤：实现解决方案与区域的双重筛选

本文详解如何使用 Shuffle.js 实现多维度（如 data-solutions 和 data-region）联合过滤，解决单过滤器覆盖、状态不同步及 JSON 数组匹配失效等常见问题。

本文详解如何使用 shuffle.js 实现多维度（如 `data-solutions` 和 `data-region`）联合过滤，解决单过滤器覆盖、状态不同步及 json 数组匹配失效等常见问题。

在实际项目中，仅靠单一维度（如仅按“解决方案”或仅按“地区”）过滤往往无法满足业务需求。Shuffle.js 原生支持自定义过滤函数，但关键在于统一管理所有筛选状态，并在每次筛选变更时触发一次完整的联合判断——而非为每个筛选器单独调用 .filter()，否则后调用者会覆盖前者的逻辑，导致多条件失效。

✅ 正确实践：集中状态 + 单次联合过滤

首先，将所有筛选维度的状态集中维护在一个对象中（如 filters = { solution: '', region: '' }），避免分散的数组（如 selectedSolutions[]）引发同步混乱和重复添加/移除逻辑错误。同时，所有筛选控件（radio、checkbox、select 等）应统一触发同一个过滤函数，确保每次只执行一次、且逻辑完整。

以下是优化后的核心实现（兼容你原有的 radio 按钮结构）：

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

<!-- 保持你的原有 HTML 结构，仅需修正 JS 逻辑 -->
<script>
const shuffleInstance = new Shuffle(document.getElementById('product_grid'), {
  itemSelector: '.product_grid_item',
  buffer: 1,
});

// ✅ 统一筛选状态对象（初始值设为 'all' 表示不限制）
const filters = {
  solution: 'all',
  region: 'all'
};

// ✅ 公共过滤函数：执行一次，综合所有条件
function applyFilters() {
  shuffleInstance.filter(element => {
    const solutions = JSON.parse(element.getAttribute('data-solutions') || '[]');
    const regions = JSON.parse(element.getAttribute('data-region') || '[]');

    // 方案匹配：'all' 或包含所选方案
    const matchSolution = filters.solution === 'all' || solutions.includes(filters.solution);

    // 区域匹配：'all' 或包含所选区域（注意大小写一致性！）
    const matchRegion = filters.region === 'all' || regions.map(r => r.toLowerCase()).includes(filters.region);

    return matchSolution && matchRegion;
  });
}

// ✅ 绑定方案筛选（radio group）
jQuery('input[name="shuffle-filter"]').on('change', function() {
  filters.solution = this.value;
  applyFilters();
});

// ✅ 绑定区域筛选（radio group）
jQuery('input[name="region"]').on('change', function() {
  filters.region = this.value;
  applyFilters();
});

// ✅ 页面加载后立即执行一次，确保初始状态生效
applyFilters();
</script>

⚠️ 关键注意事项

数据格式一致性：确保 data-region 中的值（如 "Europe"）与 radio 的 value（如 "europe"）大小写匹配，或在比较前统一转换（如 .toLowerCase()），否则 includes() 将返回 false。
JSON 解析容错：使用 || '[]' 防止空属性导致 JSON.parse(null) 报错。
避免重复绑定：检查是否在动态加载内容后重复初始化事件监听器，引发多次 applyFilters() 调用。
all 值语义明确：建议 value="all" 的 radio 始终存在，且作为默认选中项，逻辑上代表“不限制”，比空数组更直观可靠。
性能提示：Shuffle.js 的 filter() 是高效重排，无需手动 destroy()/init()；但若筛选项极多（>1000），可考虑节流（throttle）高频触发。