JavaScript中的过滤函数

olhwl3o2  于 2023-02-07  发布在  Java
关注(0)|答案(1)|浏览(108)

我目前在一个电子商务网站上工作,我一直停留在搜索页面,尤其是在筛选产品时。这是产品卡的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>

下面是该复选框的代码:

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

问题是这样的,当我选择 Helm 类时,它给我显示了所有的产品,一切都很完美,但当我选择品牌时,它并没有隐藏不匹配的产品。

c3frrgcw

c3frrgcw1#

如果产品有一个类别,您可以使用filter方法,它将返回一个新数组,其中的元素满足以下条件。例如:

const products = document.querySelectorAll('.products'):
const categories = document.querySelectorAll('input[type=checkbox]');
const filteredProducts 
= products.filter(product => product.category == categories.checked);

相关问题