JS 简单的商店商品过滤器

Question

   <div class="col-lg-3 col-md-6 shopItem Yellow XL Puma">
          <div class="products-item ">
            <div class="product-img">
              <img class='img-fluid' src="img/kamizelka2.jpg" alt="kamizelka zółta">
              <div class="overlay">
                <a href="" class="btn mybtn1">Kup teraz</a>
              </div>
            </div>
            <div class="product-content">
              <div class="product-price">
                <span class="new-price">11zł</span>
                <span class="old-price">23zł</span>
              </div>
              <h5 class='product-name'>Kamizelka Dwa</h5>
            </div>
          </div>
        </div>

我有一个很难解释的问题。 我试图为商店物品制作这个简单的过滤器。 目前这个功能只接受最后一个选择的选项（我的意思是我找不到绿色 xl 阿迪达斯项目，但只有其中一个选项，当我使用分配的选择元素时它会改变。 关于如何解决它的任何想法？

function filterAction () {
    const types = document.querySelectorAll('.form-control');
    const storeProducts = document.querySelectorAll('.shopItem');
   
    types.forEach((type)=>{
        type.addEventListener('change',(e)=>{ 
            storeProducts.forEach((product)=> {
             product.style.display='none';
                if(type.value =="All" ) {
                    product.style.display ="block"
             
                } else {
                    if (product.classList.contains(type.value)) {   
            
                        product.style.display = 'block'               
                    } else {
                        product.style.display = "none"
                    }
                }
            })
        })
    })
}
filterAction();

 <div class="search-item d-flex text-center">
            <div class="form-group col-sm-4">
              <label for="exampleFormControlSelect1">Color</label>
              <select class="form-control" id="colorLabel">
                <option data-filter="all">All</option>
                <option data-filter="yellow">Yellow</option>
                <option data-filter="green">Green</option>
                <option data-filter="orange">Orange</option>

              </select>
            </div>
            <div class="form-group col-sm-4">
              <label for="exampleFormControlSelect1">Size</label>
              <select class="form-control" id="exampleFormControlSelect1">
                <option data-filter="all">All</option>
                <option data-filter="s">S</option>
                <option data-filter="m">M</option>
                <option data-filter="l">L</option>
                <option data-filter="xl">XL</option>

              </select>
            </div>
            <div class="form-group col-sm-4">
              <label for="exampleFormControlSelect1">Brand</label>
              <select class="form-control" id="exampleFormControlSelect1">
                <option data-filter="all">All</option>
                <option class='options' data-filter="adidas">Adidas</option>
                <option class='options' data-filter="puma">Puma</option>
                <option class='options' data-filter="gucci">Gucci</option>

              </select>
            </div>
          </div>
  

<!-- begin snippet: js hide: false console: true babel: false -->



 

Answer 1

您的代码有一些缺陷，如果您选择了一些过滤器，返回上一个并选择“全部”，将显示整个商店，即使过滤器说不。当然，有很多方法可以用 vanilla JavaScript 制作过滤器（还有some with jQuery），我做了一个尝试不改变很多代码。

首先，更改产品的 HTML 并为每个过滤器添加 data attribute，因为使用类可能会有点混乱：

<div class="shopItem" data-color="green" data-size="xl" data-brand="adidas">
    <div class="products-item ">
      <div class="product-img">
        <div class="overlay">
          <a href="" class="btn mybtn1">Green XL Adidas</a>
        </div>
      </div>
      <div class="product-content">
        <h5 class='product-name'>Green XL Adidas</h5>
      </div>
    </div>
</div>

我们将有一个包含您当前所有过滤器需求的字典：

const appliedFilters = {};

每次更改过滤器时都会填充它，例如：

{
  size: "S",
  color: "All",
  brand: "Puma"
}

最后，filterAction 函数：

function filterAction () {
  const types = document.querySelectorAll('.form-control');
  const storeProducts = document.querySelectorAll('.shopItem');
  const appliedFilters = {};
  types.forEach((type)=>{
    type.addEventListener('change', function(e) { 
      appliedFilters[this.id] = this.value;
      console.log(appliedFilters);
      storeProducts.forEach(function(product) {
        let canShow = true;
        // Iterate all applied filters to determine if the product can be displayed or not
        Object.keys(appliedFilters).forEach(function (key) {
          // If it is 'All' option, we still can display the product
          if (appliedFilters[key].toLowerCase() !== 'all' && product.getAttribute('data-' + key).toLowerCase() !== appliedFilters[key].toLowerCase()) {
            canShow = false;
          }
        })
        if (canShow) {
          product.style.display = 'block';
        }else{
          product.style.display = 'none';
        }
      })
    })
  })
}

演示：

function filterAction() {
  const types = document.querySelectorAll('.form-control');
  const storeProducts = document.querySelectorAll('.shopItem');
  const appliedFilters = {};
  types.forEach((type) => {
    type.addEventListener('change', function(e) {
      appliedFilters[this.id] = this.value;
      console.log(appliedFilters);
      storeProducts.forEach(function(product) {
        let canShow = true;
        // Iterate all applied filters to determine if the product can be displayed or not
        Object.keys(appliedFilters).forEach(function(key) {
          // If it is 'All' option, we still can display the product
          if (appliedFilters[key].toLowerCase() !== 'all' && product.getAttribute('data-' + key).toLowerCase() !== appliedFilters[key].toLowerCase()) {
            canShow = false;
          }
        })
        if (canShow) {
          product.style.display = 'block';
        } else {
          product.style.display = 'none';
        }
      })
    })
  })
}
filterAction();

.search-item {
  margin-bottom: 10px;
}

<div class="search-item d-flex text-center">
  <div class="form-group col-sm-4">
    <label for="exampleFormControlSelect1">Color</label>
    <select class="form-control" id="color">
      <option data-filter="all">All</option>
      <option data-filter="yellow">Yellow</option>
      <option data-filter="green">Green</option>
      <option data-filter="orange">Orange</option>

    </select>
  </div>
  <div class="form-group col-sm-4">
    <label for="exampleFormControlSelect1">Size</label>
    <select class="form-control" id="size">
      <option data-filter="all">All</option>
      <option data-filter="s">S</option>
      <option data-filter="m">M</option>
      <option data-filter="l">L</option>
      <option data-filter="xl">XL</option>

    </select>
  </div>
  <div class="form-group col-sm-4">
    <label for="exampleFormControlSelect1">Brand</label>
    <select class="form-control" id="brand">
      <option data-filter="all">All</option>
      <option class='options' data-filter="adidas">Adidas</option>
      <option class='options' data-filter="puma">Puma</option>
      <option class='options' data-filter="gucci">Gucci</option>

    </select>
  </div>
</div>

<div class="shopItem" data-color="green" data-size="s" data-brand="puma">
  <div class="products-item ">
    <div class="product-img">
      <div class="overlay">
        <a href="" class="btn mybtn1">Green S Puma</a>
      </div>
    </div>
    <div class="product-content">
      <h5 class='product-name'>Green S Puma</h5>
    </div>
  </div>
</div>

<div class="shopItem" data-color="green" data-size="xl" data-brand="adidas">
  <div class="products-item ">
    <div class="product-img">
      <div class="overlay">
        <a href="" class="btn mybtn1">Green XL Adidas</a>
      </div>
    </div>
    <div class="product-content">
      <h5 class='product-name'>Green XL Adidas</h5>
    </div>
  </div>
</div>