JavaScript 中实现基于分组的前端产品筛选功能

本文介绍如何使用原生 javascript 为商品列表添加动态分组筛选功能，通过 data 属性标记分组、自动生成带复选框的筛选控件，并利用 classlist.toggle 实现无刷新显隐切换。 本文介绍如何使用原生 javascript 为商品列表添加动态分组筛选功能，通过 data 属性标记分组、自动生成带复选框的筛选控件，并利用 classlist.toggle 实现无刷新显隐切换。在构建交互式商品展示页面时，常需让用户按类别（如"warme dranken"、"snacks"）快速筛选内容。与其每次点击都重新渲染 DOM，更高效的做法是：一次性渲染全部商品，并通过 CSS 类控制显隐。以下是完整、可直接运行的实现方案。? 核心思路为每个 <li> 元素添加 data-group 属性，绑定其所属分组；自动提取所有唯一分组名，动态生成带标签的复选框控件；复选框默认勾选（即初始显示全部），点击时切换对应分组商品的 .hide 类；利用 CSS 的 display: none 实现高性能隐藏/显示。? 完整代码实现<style> .hide { display: none; } #filterControls { margin-bottom: 16px; } #filterControls label { margin-right: 12px; margin-left: 4px; font-weight: 500; }</style><div id="filterControls"></div><ul id="productList"></ul>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：渲染商品列表，并挂载 data-group 属性const addProducts = (array, container) => { array.forEach(item => { const li = document.createElement('li'); li.textContent = `{item.name} --- €{item.price.toFixed(2)}`; li.dataset.group = item.group; // 关键：绑定分组标识 container.appendChild(li); });};// 步骤 2：自动生成分组筛选控件（复选框 + 标签）const addGroupBoxes = (array, container) => { // 提取唯一分组名（ES6 Set 去重） const groups = [...new Set(array.map(p => p.group))]; groups.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 groupName = e.target.name; const items = document.querySelectorAll(`li[data-group="${groupName}"]`); items.forEach(el => el.classList.toggle('hide'));};// 初始化渲染addProducts(products, productList);addGroupBoxes(products, filterControls);?? 注意事项与优化建议性能友好：不依赖 filter() 重建数组或重绘 DOM，仅操作 CSS 类，适用于数百项数据；无障碍友好：<label> 与 htmlFor 正确关联，支持键盘聚焦与空格切换；可扩展性强：如需多选联动（例如"仅显示 snacks + friet"），可改用「全选/反选」逻辑 + 维护一个激活分组 Set；样式隔离建议：若项目使用 CSS-in-JS 或 Shadow DOM，.hide 类应置于全局作用域或注入 <style> 块中；移动端适配：可为复选框容器添加 flex-wrap: wrap 防止换行错位。该方案兼顾简洁性与实用性，无需框架即可实现专业级筛选体验，是原生 JavaScript 动态内容过滤的经典范式。 文心快码 文心快码（Comate）是百度推出的一款AI辅助编程工具