电商网站产品筛选问题：品牌复选框过滤失效求助

我正在开发一款电商网站，搜索页面的产品筛选功能出了问题：选择「Helmets（头盔）」类别复选框时，能正常显示对应产品；但选择「Louis Vuitton（路易威登）」品牌复选框时，无法隐藏不匹配的产品。

产品卡片HTML代码 #

<div class="product-seller-item" data-brand="Louis Vuitton" data-category="Helmets">
  <div class="product-page-seller-item-header">
    <img src="/Images/user.png" alt="User profile image">
    <p>citygirl1996</p>
  </div>
  <img class="product-page-seller-item-body-image" src="/Images/Products/product1.png" alt="">
  <div class="product-page-seller-item-footer">
    <div class="product-page-seller-item-footer-flex">
      <p>£15.00</p>
    </div>
    <p class="product-page-seller-item-footer-description">Juicy Couture</p>
  </div>
</div>

复选框HTML代码 #

<label class="container">Helmets
  <input type="checkbox" value="Helmets">
  <span class="checkmark"></span>
</label>

<label class="container">Louis Vuitton
  <input type="checkbox" value="Louis Vuitton">
  <span class="checkmark"></span>
</label>

JavaScript筛选代码 #

const checkboxes = document.querySelectorAll('input[type="checkbox"]');
const products = document.querySelectorAll('.product-seller-item');

for (let i = 0; i < checkboxes.length; i++) {
  checkboxes[i].addEventListener('change', function () {
    for (let j = 0; j < products.length; j++) {
      let productVisible = false;
      for (let k = 0; k < checkboxes.length; k++) {
        if (checkboxes[k].checked && products[j].dataset.category === checkboxes[k].value) {
          productVisible = true;
          break;
        } else if (checkboxes[k].checked && products[j].dataset.brand
          && products[j].dataset.brand === checkboxes[k].parentElement.textContent.trim()) {
          productVisible = true;
          break;
        }
      }
      if (productVisible) {
        products[j].style.display = 'block';
      } else {
        products[j].style.display = 'none';
      }
    }
  });
}

问题原因与修复方案 #

问题出在品牌筛选的判断逻辑：你通过checkboxes[k].parentElement.textContent.trim()提取品牌文本，但原HTML中label标签的文本包含大量缩进换行，即使trim后也可能出现匹配偏差。而且复选框本身已经设置了准确的value属性，完全不需要从父元素提取文本。

修改后的JavaScript代码（优化逻辑+修复问题）：

const checkboxes = document.querySelectorAll('input[type="checkbox"]');
const products = document.querySelectorAll('.product-seller-item');

for (let i = 0; i < checkboxes.length; i++) {
  checkboxes[i].addEventListener('change', function () {
    // 收集所有选中的筛选值
    const checkedValues = Array.from(checkboxes)
      .filter(checkbox => checkbox.checked)
      .map(checkbox => checkbox.value);

    // 无选中项时显示全部产品
    if (checkedValues.length === 0) {
      products.forEach(product => product.style.display = 'block');
      return;
    }

    // 逐个判断产品是否符合筛选条件
    products.forEach(product => {
      const matchesCategory = checkedValues.includes(product.dataset.category);
      const matchesBrand = checkedValues.includes(product.dataset.brand);
      product.style.display = matchesCategory || matchesBrand ? 'block' : 'none';
    });
  });
}

额外优化说明 #

1. 先收集所有选中值，避免重复遍历复选框，提升性能
2. 补充无选中时显示全部产品的逻辑，符合常规用户预期
3. 使用forEach替代嵌套for循环，代码更简洁易读

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