javascript - 在js上设置排序
问题描述
我有这个代码,但它不能正常工作。
我的问题是这些过滤器可以根据我的需要单独工作。过滤应该适用于两个过滤器。如何让它们协同工作?如何解决它,他们会一起工作什么?
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>
解决方案
您可以使用添加/删除的 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>
元素中,但这并不是那么难看。
推荐阅读
- web-crawler - 列“nextfetchdate”的 StormCrawler SQL 错误
- android - Exoplayer 源错误
- google-maps - 谷歌地图定价
- powershell - 使用powershell增加字符串的一部分
- c++ - 在 Win32 应用程序中托管 GTK+3 上下文
- java - Java JNA - 捕获所有消息
- internet-explorer - Selenium click () with 75% zoom in IE 不工作
- intellij-idea - 如何在 Ubuntu 18.04 上修复 Intellij Idea Ultmate 2018.02 中的文件夹显示
- python-3.x - 无法在 balebot 中使用 time.sleep() 发送一组消息
- php - PHP从另一台服务器执行nodejs