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

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

本文详解如何使用 Shuffle.js 同时基于多个自定义属性（如 data-solutions 和 data-region）进行联合过滤，避免单一维度覆盖问题，并提供可扩展的多条件筛选架构。

本文详解如何使用 shuffle.js 同时基于多个自定义属性（如 `data-solutions` 和 `data-region`）进行联合过滤，避免单一维度覆盖问题，并提供可扩展的多条件筛选架构。

Shuffle.js 原生支持函数式过滤（filter(callback)），但关键在于：每次筛选状态变更后，必须显式调用 shuffleInstance.filter() 触发重渲染——而非仅监听事件却未统一触发过滤逻辑。原代码中，solution 和 region 两个事件监听器各自执行 filter()，但由于 selectedSolutions 和 selectedRegions 状态不同步更新（例如切换 region 时 selectedSolutions 仍为旧值），导致过滤逻辑不一致，实际仅生效于最后触发的维度。

✅ 正确实践：统一状态 + 单一过滤入口

推荐采用集中管理筛选状态的对象（如 filters），并通过一个公共 applyFilters() 函数执行完整逻辑，确保所有条件实时协同生效：

Aria2 Json Rpc

通过 JSON‑RPC 2.0 与 aria2 下载管理器交互，使用自然语言命令管理下载、查询状态并控制任务。适用于 aria2、下载管理或种子操作。

下载

// 初始化筛选状态（默认全选）
const filters = {
  solutions: [],   // 存储选中的 solution 值（如 "Broiler Lighting"）
  regions: []      // 存储选中的 region 值（如 "europe"）
};

// 初始化 Shuffle 实例
const shuffleInstance = new Shuffle(document.getElementById('product_grid'), {
  itemSelector: '.product_grid_item',
  buffer: 1,
});

// 统一过滤函数
function applyFilters() {
  shuffleInstance.filter((element) => {
    const dataSolutions = JSON.parse(element.getAttribute('data-solutions') || '[]');
    const dataRegions = JSON.parse(element.getAttribute('data-region') || '[]');

    // 解决方案匹配：空数组 → 不限制；否则需至少匹配一项
    const solutionMatch = filters.solutions.length === 0 || 
      filters.solutions.some(s => dataSolutions.includes(s));

    // 区域匹配：同理
    const regionMatch = filters.regions.length === 0 || 
      filters.regions.some(r => dataRegions.includes(r));

    return solutionMatch && regionMatch;
  });
}

// 绑定 solution 过滤器（radio group）
$('#solution-options input[name="shuffle-filter"]').on('change', function () {
  const value = this.value;
  if (this.checked) {
    filters.solutions = [value]; // radio 单选，直接覆盖
  } else {
    filters.solutions = []; // 实际中 radio 不会取消选中，此行可省略
  }
  applyFilters();
});

// 绑定 region 过滤器（radio group）
$('#region-options input[name="region"]').on('change', function () {
  const value = this.value;
  if (this.checked) {
    filters.regions = [value];
  }
  applyFilters(); // 每次变更后统一应用全部条件
});

⚠️ 注意事项与最佳实践

数据格式一致性：确保 data-solutions 和 data-region 的 JSON 字符串格式正确（如 ["Broiler Lighting"]），且值与 filter input 的 value 完全匹配（注意大小写和空格）。
Radio vs Checkbox 语义：当前 UI 使用 radio 表示单选，因此 filters.solutions 和 filters.regions 应为单值数组（或字符串），无需 push/splice 多值逻辑；若需多选（如同时选多个 solution），请改用 checkbox 并调整状态管理。
初始化过滤：页面加载后应主动调用一次 applyFilters()，确保初始状态（如默认选中 "all"）正确生效。
性能优化：对于大量元素（>500），可添加防抖（debounce）避免高频重排，但 Shuffle 内部已做节流，通常无需额外处理。
扩展性设计：未来新增过滤维度（如 data-category）时，只需在 filters 对象中添加字段、在 applyFilters() 中补充匹配逻辑，无需修改事件绑定结构。