JavaScript 中实现基于分组的前端产品筛选功能-js教程-PHP中文网

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

本文介绍如何使用原生 javascript 为商品列表添加动态分组筛选功能，通过 data 属性标记分组、自动生成带复选框的筛选控件，并利用 classlist.toggle 实现无刷新显隐切换。

本文介绍如何使用原生 javascript 为商品列表添加动态分组筛选功能，通过 data 属性标记分组、自动生成带复选框的筛选控件，并利用 classlist.toggle 实现无刷新显隐切换。

在构建交互式商品展示页面时，常需让用户按类别（如“warme dranken”、“snacks”）快速筛选内容。与其每次点击都重新渲染 DOM，更高效的做法是：一次性渲染全部商品，并通过 CSS 类控制显隐。以下是完整、可直接运行的实现方案。

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

✅ 核心思路

为每个
元素添加 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>

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);