本文详解如何使用 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 按钮结构）：
<!-- 保持你的原有 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）高频触发。
✅ 扩展性说明
未来新增筛选维度（如 data-category、data-price-range）只需三步：
- 在 filters 对象中添加新字段（如 category: 'all'）；
- 为对应控件绑定 change 事件并更新该字段；
- 在 applyFilters() 的返回条件中追加匹配逻辑。
这样设计既保持代码清晰，又具备强扩展性，真正实现「一个入口、多维联动」的工业级筛选体验。
