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 实现

<script>
function applyFilters() {
  // 步骤1：收集所有已选中的过滤条件（按 type 分组）
  const filters = {};
  document.querySelectorAll('input[type="checkbox"]:checked').forEach(cb => {
    const type = cb.dataset.filterType;
    if (!filters[type]) filters[type] = [];
    filters[type].push(cb.value);
  });

  // 步骤2：遍历所有产品项
  document.querySelectorAll('.productItem').forEach(product => {
    let shouldShow = true;

    // 对每个已激活的过滤维度执行校验
    for (const [type, selectedValues] of Object.entries(filters)) {
      const attrName = `data-${type}`;
      const productValues = (product.getAttribute(attrName) || '').trim().split(/\s+/).filter(v => v);

      // 检查当前维度下，所有 selectedValues 是否都在 productValues 中
      const allMatch = selectedValues.every(val => productValues.includes(val));
      if (!allMatch) {
        shouldShow = false;
        break; // 任一维度不满足，立即终止校验
      }
    }

    // 应用显隐
    product.style.display = shouldShow ? 'block' : 'none';
  });
}

// 步骤3：绑定事件监听（支持实时响应）
document.addEventListener('change', e => {
  if (e.target.type === 'checkbox' && e.target.dataset.filterType) {
    applyFilters();
  }
});

// 初始化：首次加载时执行一次（确保默认状态正确）
document.addEventListener('DOMContentLoaded', applyFilters);
</script>

⚠️ 注意事项与最佳实践

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

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

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