本文介绍如何使用纯 JavaScript 实现基于多个 data-* 属性（支持空格分隔多值）的实时产品筛选功能，通过监听复选框状态，精准显示同时满足所有已选条件的产品项。

本文介绍如何使用纯 javascript 实现基于多个 `data-*` 属性（支持空格分隔多值）的实时产品筛选功能，通过监听复选框状态，精准显示同时满足所有已选条件的产品项。

在构建产品对比页时，常需让用户从多个维度（如颜色、尺寸、供电方式等）组合筛选商品。关键挑战在于：每个产品可能具备多个同类属性（例如 data-color="red white blue"），而用户可跨类别多选（如勾选“red”+“medium”+“solar”），系统应仅显示完全匹配全部已选条件的产品——即“交集过滤”，而非“任一匹配”。

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

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

✅ 核心逻辑说明

• 每个 .productItem 元素的 data-* 属性值为空格分隔的字符串（如 data-color="red white blue"）；
• 所有同类型复选框（如 data-filter-type="color"）构成一个筛选组；
• 过滤规则是：只有当某产品在每个激活的筛选组中，都至少包含一个当前被勾选的值时，该产品才保留可见；
• 即：对每个已勾选的 checkbox，检查对应 productItem 的 data-[type] 属性是否包含其 value；所有检查均通过，才显示该产品。

✅ 完整可运行代码示例

<!-- 复选框结构（保持原样） -->
<h4 class="heading-primary">color</h4>

red
white

Module 178

Module 231

<script> // 初始化：缓存所有产品元素和筛选组 const products = document.querySelectorAll('.productItem'); const filterGroups = {}; // 按 data-filter-type 分组收集所有复选框 document.querySelectorAll('input[type="checkbox"][data-filter-type]').forEach(checkbox => { const type = checkbox.dataset.filterType; if (!filterGroups[type]) filterGroups[type] = []; filterGroups[type].push(checkbox); }); // 主过滤函数 function applyFilters() { products.forEach(product => { let show = true; // 遍历每个筛选组（如 color, size, power...） for (const [type, checkboxes] of Object.entries(filterGroups)) { // 获取该组中所有已勾选的值 const selectedValues = checkboxes .filter(cb => cb.checked) .map(cb => cb.value); // 若该组无勾选，则跳过此组（不限制） if (selectedValues.length === 0) continue; // 获取当前 product 对应的 data 属性值（转为 Set 提升查找效率） const attrValue = product.dataset[type]; const productValues = attrValue ? new Set(attrValue.split(/s+/)) : new Set(); // 检查：是否至少有一个已选值存在于 product 的属性中？ const hasMatch = selectedValues.some(val => productValues.has(val)); if (!hasMatch) { show = false; break; // 不满足任一条件，立即排除 } } product.style.display = show ? 'block' : 'none'; }); } // 绑定事件监听（支持动态增删 checkbox） document.addEventListener('change', e => { if (e.target.type === 'checkbox' && e.target.hasAttribute('data-filter-type')) { applyFilters(); } }); // 页面加载后执行一次（确保初始状态正确） applyFilters(); </script>

⚠️ 注意事项与优化建议

• 性能友好：使用 Set 存储 data-* 值，O(1) 查找；避免重复 DOM 查询；
• 空格安全：正则 /\s+/ 可处理多个连续空格或制表符；
• 大小写敏感：默认区分大小写（如 "Temperature" ≠ "temperature"），如需忽略，统一转为 .toLowerCase() 处理；
• 空属性容错：若某 product 缺失某个 data-* 属性（如无 data-sensor），则 product.dataset.sensor 为 undefined，自动视为不匹配；
• 服务端回退：本方案完全客户端执行，适合中小型数据集（
• 无障碍增强：可为 .products 添加 aria-live="polite"，配合 aria-hidden 动态更新，提升屏幕阅读器体验。

该方案无需依赖 jQuery 或框架，兼容现代浏览器（IE11+ 需补全 Set），结构清晰、易于维护，并可轻松扩展新筛选维度（只需新增 data-filter-type 复选框及对应 data-* 属性即可）。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！