JavaScript产品过滤按钮功能失效，请求代码排查与修正建议

原代码的核心问题 #

• document.querySelectorAll('.all')返回的是NodeList元素集合，不能直接对集合调用classList、addClass这类单个元素的方法，必须遍历每个产品元素逐一处理。
• 使用classList.contains()时，类名不需要加.，应该写'deposit'而非'.deposit'。
• 原生JavaScript没有addClass()/removeClass()方法，正确写法是element.classList.add()和element.classList.remove()。
• 原逻辑绕了弯路，完全可以简化为直接判断每个产品是否符合过滤条件，再统一处理显示/隐藏。

修正后的代码 #

JavaScript部分

function filterdeposit() {
  // 获取所有产品元素
  const products = document.querySelectorAll('.all');
  // 遍历每个产品逐一处理
  products.forEach(product => {
    if (product.classList.contains('deposit')) {
      // 显示带deposit类的产品：移除隐藏类
      product.classList.remove('product-card--hide');
    } else {
      // 隐藏不带deposit类的产品：添加隐藏类
      product.classList.add('product-card--hide');
    }
  });
}

HTML部分

如果需要初始状态下所有产品都显示，保持原有结构即可：

<body>
  <button class="button" onclick="filterdeposit()">Deposit</button>

  <div class="all deposit">Deposit 产品</div>
  <div class="all something">非Deposit 产品1</div>
  <div class="all somethingelse">非Deposit 产品2</div>
</body>

额外优化建议 #

• 避免使用内联onclick事件，推荐用事件监听绑定，实现HTML与JS逻辑分离：

document.querySelector('.button').addEventListener('click', filterdeposit);

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