按类别筛选商品求助：实现点击分类显示对应商品

直接给你一套可落地的代码示例，你可以对照自己的项目调整：

1. 页面结构（HTML） #

<!-- 分类按钮 -->
<button class="category-btn" data-category="Amulets">Amulets</button>
<button class="category-btn" data-category="Rings">Rings</button>
<button class="category-btn" data-category="Necklaces">Necklaces</button>

<!-- 商品展示区域 -->
<div id="products-container"></div>

2. 商品数据与筛选逻辑（JS） #

// 模拟从JSON文件加载的商品数据（实际项目里你可以用fetch/axios导入本地JSON）
const products = [
  { id: 1, name: "守护符A", category: "Amulets", price: 99 },
  { id: 2, name: "戒指B", category: "Rings", price: 199 },
  { id: 3, name: "幸运符C", category: "Amulets", price: 149 },
  { id: 4, name: "项链D", category: "Necklaces", price: 299 }
];

// 获取页面元素
const productsContainer = document.getElementById('products-container');
const categoryBtns = document.querySelectorAll('.category-btn');

// 渲染商品的函数
function renderProducts(filteredProducts) {
  // 先清空容器，避免重复渲染旧商品
  productsContainer.innerHTML = '';
  filteredProducts.forEach(product => {
    const productCard = document.createElement('div');
    productCard.className = 'product-card';
    productCard.innerHTML = `
      <h3>${product.name}</h3>
      <p>类别: ${product.category}</p>
      <p>价格: $${product.price}</p>
    `;
    productsContainer.appendChild(productCard);
  });
}

// 页面加载时先渲染所有商品
renderProducts(products);

// 给每个分类按钮绑定点击事件
categoryBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    // 获取按钮上绑定的目标分类名
    const targetCategory = btn.dataset.category;
    // 用filter筛选出对应类别的商品
    const filteredProducts = products.filter(item => item.category === targetCategory);
    // 渲染筛选后的结果
    renderProducts(filteredProducts);
  });
});

新手容易踩的坑 #

• 大小写敏感：JS严格区分大小写，要确保JSON里的category值（比如"Amulets"）和按钮上的data-category值完全一致，不能一个大写一个小写
• 数据加载时机：如果商品数据是从外部JSON异步加载的，要等数据加载完成后再执行筛选逻辑（比如放在fetch的then回调里）
• DOM元素获取错误：检查容器ID、按钮类名有没有写错，确保能正确获取到页面元素

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