在js上设置排序

Question

我有这段代码，但它不能正常工作。

我的问题是这些过滤器可以根据我的需要单独工作。过滤应该适用于两个过滤器。如何让它们协同工作？如何解决它，他们会一起工作吗？

let productBox = document.querySelectorAll('.product');
let selectCategory = document.querySelector('#select-category');
let selectPrice = document.querySelector('#select-price');

selectCategory.addEventListener('change', (evt) => {
    	let selectVal = evt.currentTarget.value;
    	Array.prototype.forEach.call(productBox, prodItem => {
    		if((selectVal !== 'all') && (prodItem.dataset.category !== selectVal)) {
    			prodItem.style.display = 'none'
    		} else {
    			prodItem.style.display = 'block'
    		}
    	})
});

selectPrice.addEventListener('change', (evt) => {
    	let selectVal = evt.currentTarget.value;
    	Array.prototype.forEach.call(productBox, prodItem => {
    		if((selectVal === '0') || (+prodItem.dataset.price <= +selectVal)) {
    			prodItem.style.display = 'block'
    		} else {
    			prodItem.style.display = 'none'
    		}
    	})
})

.product {
    border: 1px solid;
    padding: 2px;
    margin: .5rem;
}

<select id="select-category">
    <option value="all">All</option>
    <option value="dinner">Dinner</option>
    <option value="first meal">First meal</option>
    <option value="garnish">Garnish</option>
</select>

<select id="select-price">
    <option value="all">All</option>
    <option value="30">Up to 30 dollars</option>
    <option value="50">Up to 50 dollars</option>
    <option value="100">Up to 100 dollars</option>
</select>

<div data-category="dinner" data-price="30" class="product">Dinner</div>
<div data-category="first meal" data-price="50" class="product">First meal</div>
<div data-category="dinner" data-price="45" class="product">Dinner2</div>
<div data-category="first meal" data-price="55" class="product">First meal2</div>
<div data-category="garnish" data-price="100" class="product">Garnish</div>
<div data-category="garnish" data-price="120" class="product">Garnish2</div>

Answer 1

您可以使用添加/删除的 CSS 规则和类来做您想做的事。这样元素就会“记住”过滤器的效果。

let productBox = document.querySelectorAll('.product');
let selectCategory = document.querySelector('#select-category');
let selectPrice = document.querySelector('#select-price');

selectCategory.addEventListener('change', (evt) => {
  let selectVal = evt.currentTarget.value;
  Array.prototype.forEach.call(productBox, prodItem => {
    if ((selectVal === 'all') || (prodItem.dataset.category === selectVal)) {
      prodItem.classList.add("category-good");
    } else {
      prodItem.classList.remove("category-good");
    }
  })
});

selectPrice.addEventListener('change', (evt) => {
  let selectVal = evt.currentTarget.value;
  Array.prototype.forEach.call(productBox, prodItem => {
    if ((selectVal === 'all') || (+prodItem.dataset.price <= +selectVal)) {
      prodItem.classList.add("price-good");
    } else {
      prodItem.classList.remove("price-good")
    }
  })
});

.product {
  border: 1px solid;
  padding: 2px;
  margin: .5rem;
  display: none;
}

.product.category-good.price-good {
  display: block;
}

<select id="select-category">
  <option value="all">All</option>
  <option value="dinner">Dinner</option>
  <option value="first meal">First meal</option>
  <option value="garnish">Garnish</option>
</select>

<select id="select-price">
  <option value="all">All</option>
  <option value="30">Up to 30 dollars</option>
  <option value="50">Up to 50 dollars</option>
  <option value="100">Up to 100 dollars</option>
</select>

<div data-category="dinner" data-price="30" class="product category-good price-good">Dinner</div>
<div data-category="first meal" data-price="50" class="product category-good price-good">First meal</div>
<div data-category="dinner" data-price="45" class="product category-good price-good">Dinner2</div>
<div data-category="first meal" data-price="55" class="product category-good price-good">First meal2</div>
<div data-category="garnish" data-price="100" class="product category-good price-good">Garnish</div>
<div data-category="garnish" data-price="120" class="product category-good price-good">Garnish2</div>

这样设置可能会更简洁一些，以便在启动时在每个 <select> 上触发一个事件，这样您就不必将初始的“好”类显式添加到 <div> 元素，但是没那么丑。