本文介绍一种灵活、可扩展的前端产品列表筛选方案：通过为列表项添加 data-group 属性，结合复选框控制显隐，实现按分类（如“warme dranken”）实时过滤内容，无需重新渲染 dom。
本文介绍一种灵活、可扩展的前端产品列表筛选方案：通过为列表项添加 data-group 属性，结合复选框控制显隐，实现按分类（如“warme dranken”）实时过滤内容，无需重新渲染 dom。
在构建交互式商品列表时，仅静态展示数据远远不够——用户需要快速聚焦于特定品类（如“热饮”“冷饮”）。本教程提供一个轻量、高效且符合现代 Web 开发实践的筛选方案：不依赖框架、不重复生成 DOM、不重绘列表，而是利用 data-* 属性 + CSS 类切换 + 原生事件监听完成动态过滤。
✅ 核心思路
- 为每个 <li> 元素注入 data-group 属性，绑定其所属分类；
- 自动生成去重后的分类复选框控件（支持多选/反选）；
- 点击复选框时，仅对对应 data-group 的所有 <li> 切换 .hide 类，由 CSS 控制显隐。
? 实现步骤与代码
首先，确保 HTML 中存在容器元素：
<div id="filterControls"></div> <div id="productList"></div>
⚠️ 注意：我们把筛选控件（复选框）与商品列表分离到不同容器中，提升结构清晰度和可维护性。
接着，编写完整逻辑（含注释说明）：
立即学习“Java免费学习笔记（深入）”；
const products = [
{ name: 'koffie', price: 2.50, group: 'warme dranken' },
{ name: 'thee', price: 2.50, group: 'warme dranken' },
{ name: 'cola', price: 3.50, group: 'koude dranken' },
{ name: 'ice tea', price: 3.50, group: 'koude dranken' },
{ name: 'patat', price: 3.50, group: 'friet' },
{ name: 'patat mayo', price: 3.50, group: 'friet' },
{ name: 'frikandel', price: 3.50, group: 'snacks' },
{ name: 'kroket', price: 3.50, group: 'snacks' }
];
const productList = document.querySelector('#productList');
const filterControls = document.querySelector('#filterControls');
// 步骤1：渲染商品列表，并标注分组
const addProducts = (array, container) => {
array.forEach(item => {
const li = document.createElement('li');
li.textContent = item.name;
li.dataset.group = item.group; // 关键：绑定分组标识
container.appendChild(li);
});
};
// 步骤2：生成分类筛选控件（复选框 + 标签）
const addGroupBoxes = (array, container) => {
// 提取所有唯一 group 值
const uniqueGroups = [...new Set(array.map(p => p.group))];
uniqueGroups.forEach(group => {
const checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.name = group;
checkbox.checked = true; // 默认全部显示
checkbox.className = 'group-filter';
checkbox.addEventListener('change', onCheckboxToggle);
const label = document.createElement('label');
label.textContent = group;
label.htmlFor = group;
container.append(checkbox, label, document.createTextNode(' ')); // 添加空格分隔
});
};
// 步骤3：复选框切换时的响应逻辑
const onCheckboxToggle = (e) => {
const targetGroup = e.target.name;
const matchingItems = document.querySelectorAll(`li[data-group="${targetGroup}"]`);
matchingItems.forEach(item => {
item.classList.toggle('hide', !e.target.checked); // checked → 显示；!checked → 隐藏
});
};
// 启动：先渲染列表，再挂载筛选器
addProducts(products, productList);
addGroupBoxes(products, filterControls);最后，添加必要的 CSS 样式：
.hide {
display: none;
}
#filterControls label {
margin-right: 12px;
font-weight: 500;
}
#filterControls input[type="checkbox"] {
margin-right: 4px;
}? 优势与注意事项
- ✅ 性能友好：仅操作 classList，避免频繁 DOM 重建或 innerHTML 重写；
- ✅ 语义清晰：data-group 符合 HTML5 自定义属性规范，便于调试与后续扩展（如支持搜索、排序）；
- ✅ 开箱即用：自动识别所有分组，无需手动维护按钮列表；
- ⚠️ 若需“单选模式”（类似 radio），可将 type="checkbox" 改为 type="radio" 并统一 name，同时调整 onCheckboxToggle 逻辑为显隐互斥；
- ⚠️ 如需持久化用户筛选状态，可结合 localStorage 保存复选框状态并在初始化时恢复。
该方案简洁、健壮、易拓展，是纯 JavaScript 实现前端内容筛选的理想范例。
