JavaScript如何实现点击分类按钮过滤JSON对象按类展示商品

• 适配数千条商品数据的场景，优先选择操作已渲染DOM显隐的方案，避免每次点击都重绘全量列表带来的性能开销
• 仅需要对原有渲染逻辑做极小改动，补全预留的过滤函数即可，不需要重构已有代码

第一步：给渲染的商品项加分类标识 #

修改原有getProducts函数的单商品渲染逻辑，给每个商品项加上自定义分类属性，方便后续快速匹配：

// 以下是getProducts内渲染单个商品的逻辑补充，其余原有代码保持不变
const productNode = document.createElement('div'); // 你原有创建商品节点的代码，不需要改
// 新增下面这行，把当前商品的Category值挂到节点的data属性上
productNode.dataset.category = singleProduct.Category;
// 原有把商品节点插入到.Sheet容器的逻辑保持不变

第二步：抽离公共过滤方法 #

所有分类过滤的逻辑完全一致，抽成公共函数复用，避免每个分类函数写重复代码：

/**
 * 按分类过滤展示商品
 * @param {string|null} targetCategory 目标分类，传null时展示全量商品
 */
function filterByCategory(targetCategory) {
  // 获取.Sheet容器下所有商品项，如果你给商品项加了专属class，把选择器替换成对应值即可，比如.Sheet .product-card
  const productList = document.querySelectorAll('.Sheet > div');
  productList.forEach(item => {
    // 全量展示场景直接恢复所有商品显示
    if (targetCategory === null) {
      item.style.display = '';
      return;
    }
    // 分类匹配的商品显示，不匹配的隐藏
    item.style.display = item.dataset.category === targetCategory ? '' : 'none';
  });
}

第三步：补全各分类预留的空函数 #

直接在预留的分类过滤函数里调用公共方法，传入对应分类值即可，注意传入的分类字符串必须和JSON数据里Category字段的取值完全一致（包括拼写、大小写，比如现有分类名是Supplments就不要自行修正为Supplements，避免匹配失败）：

// Show all 全量展示
function showAllProducts() {
  filterByCategory(null);
}

// Electronics 分类
function filterElectronics() {
  filterByCategory('Electronics');
}

// Supplments 分类
function filterSupplments() {
  filterByCategory('Supplments');
}

// Toys 分类
function filterToys() {
  filterByCategory('Toys');
}

// Packing 分类
function filterPacking() {
  filterByCategory('Packing');
}

// Other 分类
function filterOther() {
  filterByCategory('Other');
}

实现说明

• 最后把按钮上原有的onclick绑定的函数名，和上面补全的函数名对应上即可，比如Toys按钮的onclick="filterToys()"不需要改动，和函数名保持一致就行
• 如果需要加选中按钮的高亮样式，可以在公共过滤方法里额外加按钮状态切换的逻辑，不影响核心过滤功能
• 该方案在数千条数据量级下无性能问题，不需要引入虚拟列表等额外方案

内容的提问来源于stack exchange，提问作者kiro