data属性多值筛选实现产品动态展示

本文详解了一种轻量、高效且高度可扩展的纯 JavaScript 多值筛选方案，巧妙利用 HTML 的 `data-*` 属性（如 `data-color="red white blue"`）存储多选项值，并通过严格的“所有选中条件必须同时满足”的 AND 逻辑，实现实时、精准的产品模块动态显示；代码简洁健壮，支持任意维度扩展、大小写灵活处理、无障碍友好，且零依赖、无需后端参与，特别适合构建响应迅速的产品对比页或分类筛选界面。

本文介绍如何使用纯 JavaScript 实现基于多组复选框的精准产品筛选功能，支持在单个 data-* 属性中存储多个空格分隔值（如 data-color="red white blue"），并按“所有选中条件必须同时满足”的逻辑动态显示匹配的产品项。

本文介绍如何使用纯 JavaScript 实现基于多组复选框的精准产品筛选功能，支持在单个 `data-*` 属性中存储多个空格分隔值（如 `data-color="red white blue"`），并按“所有选中条件必须同时满足”的逻辑动态显示匹配的产品项。

在构建产品对比页时，常见需求是让用户通过多组独立分类（颜色、尺寸、电源类型等）进行交叉筛选。关键挑战在于：每个产品项的 data-* 属性需支持多个可选值（例如 data-color="red white blue"），而筛选逻辑应严格遵循「用户勾选的所有选项，都必须在当前产品对应属性中存在」——即AND 逻辑交集匹配，而非 OR 或部分匹配。

以下是一个健壮、可扩展的实现方案：

✅ 核心思路

• 每个复选框通过 data-filter-type 标识所属维度（如 "color"、"size"）；
• 所有已勾选的值按维度归类，形成一个映射对象：{ color: ['red', 'blue'], size: ['medium'], power: ['battery', 'solar'] }；
• 遍历每个 .productItem 元素，对其每个 data-filter-type 维度：
  • 读取其 data-{type} 属性值（如 data-color），用 split(' ') 转为数组；
  • 检查该维度下所有已选值是否均存在于该产品的值数组中；
  • 若任一维度存在未匹配的选中项，则隐藏该产品；全部维度均满足才显示。

✅ 完整 JavaScript 实现

⚠️ 注意事项与最佳实践

• 空格分隔安全：data-* 值中避免含不可见字符或多余空格；建议服务端或构建时标准化（如 value.trim().split(/\s+/).filter(Boolean)）；
• 大小写敏感：当前逻辑区分大小写（"Battery" ≠ "battery"），如需忽略，请统一转为小写比对（val.toLowerCase() 和 productValues.map(v => v.toLowerCase())）；
• 性能优化：若产品数量超百，可考虑节流 change 事件，或使用 DocumentFragment 批量操作 DOM；
• 无障碍支持：为 添加 for 属性或确保包裹关系正确（当前代码中 包裹 是合规的）；
• 无筛选时显示全部：当没有任何复选框被勾选时，filters 为空对象，for...of 循环不执行 → shouldShow 保持 true，所有产品显示，符合直觉。

该方案完全客户端运行，无需服务端介入，语义清晰、易于维护，并天然支持任意新增维度（只需添加对应 data-filter-type 的复选框和 data-{type} 属性即可）。

以上就是《data属性多值筛选实现产品动态展示》的详细内容，更多关于的资料请关注golang学习网公众号！