Настроить сортировку на 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>, но это не так страшно.