javascript - 如何根据选择进行过滤?
问题描述
请告诉我如何过滤并仅将与第一个和第二个块中的选择相对应的卡留在第 3 块中。(第一块和第二块相互独立,第三块的结果取决于前两块的选择)
默认情况下选择第一个项目。如果第三块中的牌多于 4 张,则显示前 4 张,并隐藏其余的。
https://jsfiddle.net/42fh68w0/1/
const step1_items = document.querySelector('.step-1').querySelectorAll('.item');
const step2_items = document.querySelector('.step-2').querySelectorAll('.item');
const stepCards = document.querySelector('.step-3').querySelectorAll('.card');
step1_items.forEach(function(item) {
item.addEventListener('click', function() {
step1_items.forEach(function(item) {
item.classList.remove('item_active');
});
this.classList.add('item_active');
});
})
step2_items.forEach(function(item) {
item.addEventListener('click', function() {
step2_items.forEach(function(item) {
item.classList.remove('item_active');
});
this.classList.add('item_active');
});
})
stepCards.forEach(function(item) {
item.style.display = 'block'
});
.wrapper {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
.step-1,
.step-2 {
border: 1px solid #009ce1;
padding: 15px;
display: inline-block;
margin-right: 15px;
}
.sign {
display: block;
margin-bottom: 15px;
color: #5b6d89;
width: 100%;
}
.item {
padding-left: 30px;
list-style: none;
font-size: 20px;
line-height: 30px;
cursor: pointer;
color: #008ed1;
transition: all 0.3s;
position: relative;
height: auto;
}
.item::before {
content: '';
width: 12px;
height: 12px;
border-radius: 100%;
border: 1px solid #008ed1;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.item_active::before {
background-color: #008ed1;
}
.item:hover {
color: #ccc;
}
.step-3 {
border: 1px solid #009ce1;
padding: 15px;
display: inline-flex;
flex-wrap: wrap;
justify-content: space-between;
}
.card {
width: 150px;
margin-bottom: 15px;
padding: 10px;
list-style: none;
text-align: center;
font-size: 20px;
line-height: 30px;
color: #008ed1;
border: 1px solid #008ed1;
}
.card__more {
margin-top: 10px;
display: block;
text-decoration: none;
color: #ee8853;
border: 1px solid #ee8853;
}
<div class="wrapper">
<ul class="step-1">
<span class="sign">Streaming service</span>
<li class="item item_active">Netflix</li>
<li class="item">HBO Max</li>
<li class="item">Hulu</li>
</ul>
<ul class="step-2">
<span class="sign">Movie genre</span>
<li class="item item_active">Comedies</li>
<li class="item">Actions</li>
<li class="item">Horrors</li>
<li class="item">Drama</li>
<li class="item">Fantasy</li>
</ul>
<ul class="step-3">
<span class="sign">Choose</span>
<li class="card">
Netflix comedy 1
<a href="#" class="card__more">more info</a>
</li>
<li class="card">
Netflix comedy 2
<a href="#" class="card__more">more info</a>
</li>
<li class="card">
Netflix comedy 3
<a href="#" class="card__more">more info</a>
</li>
<li class="card">
Netflix comedy 4
<a href="#" class="card__more">more info</a>
</li>
<li class="card">
Netflix actions 1
<a href="#" class="card__more">more info</a>
</li>
<li class="card">
Netflix actions 2
<a href="#" class="card__more">more info</a>
</li>
<li class="card">
Netflix actions 3
<a href="#" class="card__more">more info</a>
</li>
<li class="card">
Netflix horrors 1
<a href="#" class="card__more">more info</a>
</li>
<li class="card">
Netflix horrors 2
<a href="#" class="card__more">more info</a>
</li>
<li class="card">
Netflix horrors 3
<a href="#" class="card__more">more info</a>
</li>
<li class="card">
Netflix horrors 4
<a href="#" class="card__more">more info</a>
</li>
<li class="card">
Netflix drama 1
<a href="#" class="card__more">more info</a>
</li>
<li class="card">
Netflix drama 2
<a href="#" class="card__more">more info</a>
</li>
<li class="card">
Netflix fantasy 1
<a href="#" class="card__more">more info</a>
</li>
<li class="card">
Netflix fantasy 2
<a href="#" class="card__more">more info</a>
</li>
<li class="card">
Netflix fantasy 3
<a href="#" class="card__more">more info</a>
</li>
<li class="card">
Netflix fantasy 4
<a href="#" class="card__more">more info</a>
</li>
<li class="card">
Netflix fantasy 5
<a href="#" class="card__more">more info</a>
</li>
<li class="card">
HBO Max comedy 1
<a href="#" class="card__more">more info</a>
</li>
<li class="card">
HBO Max comedy 2
<a href="#" class="card__more">more info</a>
</li>
<li class="card">
HBO Max comedy 3
<a href="#" class="card__more">more info</a>
</li>
<li class="card">
HBO Max actions 1
<a href="#" class="card__more">more info</a>
</li>
<li class="card">
HBO Max actions 2
<a href="#" class="card__more">more info</a>
</li>
<li class="card">
HBO Max actions 3
<a href="#" class="card__more">more info</a>
</li>
<li class="card">
HBO Max actions 4
<a href="#" class="card__more">more info</a>
</li>
<li class="card">
HBO Max horrors 1
<a href="#" class="card__more">more info</a>
</li>
<li class="card">
HBO Max horrors 2
<a href="#" class="card__more">more info</a>
</li>
<li class="card">
HBO Max horrors 3
<a href="#" class="card__more">more info</a>
</li>
<li class="card">
HBO Max horrors 4
<a href="#" class="card__more">more info</a>
</li>
<li class="card">
HBO Max drama 1
<a href="#" class="card__more">more info</a>
</li>
<li class="card">
HBO Max drama 2
<a href="#" class="card__more">more info</a>
</li>
<li class="card">
HBO Max drama 3
<a href="#" class="card__more">more info</a>
</li>
<li class="card">
HBO Max drama 4
<a href="#" class="card__more">more info</a>
</li>
<li class="card">
HBO Max fantasy 1
<a href="#" class="card__more">more info</a>
</li>
<li class="card">
HBO Max fantasy 2
<a href="#" class="card__more">more info</a>
</li>
<li class="card">
HBO Max fantasy 3
<a href="#" class="card__more">more info</a>
</li>
<li class="card">
HBO Max fantasy 4
<a href="#" class="card__more">more info</a>
</li>
<li class="card">
HBO Max fantasy 5
<a href="#" class="card__more">more info</a>
</li>
<li class="card">
Hulu comedy 1
<a href="#" class="card__more">more info</a>
</li>
<li class="card">
Hulu comedy 2
<a href="#" class="card__more">more info</a>
</li>
<li class="card">
Hulu actions 1
<a href="#" class="card__more">more info</a>
</li>
<li class="card">
Hulu actions 2
<a href="#" class="card__more">more info</a>
</li>
<li class="card">
Hulu actions 3
<a href="#" class="card__more">more info</a>
</li>
<li class="card">
Hulu actions 4
<a href="#" class="card__more">more info</a>
</li>
<li class="card">
Hulu actions 5
<a href="#" class="card__more">more info</a>
</li>
<li class="card">
Hulu actions 6
<a href="#" class="card__more">more info</a>
</li>
<li class="card">
Hulu horrors 1
<a href="#" class="card__more">more info</a>
</li>
<li class="card">
Hulu horrors 2
<a href="#" class="card__more">more info</a>
</li>
<li class="card">
Hulu horrors 3
<a href="#" class="card__more">more info</a>
</li>
<li class="card">
Hulu drama 1
<a href="#" class="card__more">more info</a>
</li>
<li class="card">
Hulu drama 2
<a href="#" class="card__more">more info</a>
</li>
<li class="card">
Hulu drama 3
<a href="#" class="card__more">more info</a>
</li>
<li class="card">
Hulu drama 4
<a href="#" class="card__more">more info</a>
</li>
<li class="card">
Hulu drama 6
<a href="#" class="card__more">more info</a>
</li>
<li class="card">
Hulu fantasy 1
<a href="#" class="card__more">more info</a>
</li>
<li class="card">
Hulu fantasy 2
<a href="#" class="card__more">more info</a>
</li>
<li class="card">
Hulu fantasy 3
<a href="#" class="card__more">more info</a>
</li>
<li class="card">
Hulu fantasy 4
<a href="#" class="card__more">more info</a>
</li>
<li class="card">
Hulu fantasy 5
<a href="#" class="card__more">more info</a>
</li>
</ul>
</div>
解决方案
试试这个javascript代码
const step1_items = document.querySelector('.step-1').querySelectorAll('.item');
const step2_items = document.querySelector('.step-2').querySelectorAll('.item');
const stepCards = document.querySelector('.step-3').querySelectorAll('.card');
let service = "Netflix", movieGenre = "Comedies";
step1_items.forEach(function(item) {
item.addEventListener('click', function() {
step1_items.forEach(function(item) {
item.classList.remove('item_active');
});
this.classList.add('item_active');
service = this.textContent
showChosen(service,movieGenre);
});
})
step2_items.forEach(function(item) {
item.addEventListener('click', function() {
step2_items.forEach(function(item) {
item.classList.remove('item_active');
});
this.classList.add('item_active');
movieGenre = this.textContent
showChosen(service,movieGenre);
});
})
stepCards.forEach(function(item) {
item.style.display = 'block'
});
function showChosen(service,genre){
const allCards = document.getElementsByClassName('card');
console.log(service + genre)
for(card of allCards){
if(card.textContent.includes(service)&&card.textContent.includes(genre.toLowerCase())){
card.style.display = "block"
}else{
card.style.display = "none"
}
}
}
它只是迭代元素并隐藏不活动
顺便说一句,不要使用 querySelector,使用 .getElementsByClassName/.getElementById 因为它们要快得多
我尽量不碰你已经写好的代码
推荐阅读
- php - PHP 致命错误:未捕获的错误:类 'WooGateWayCoreLib\admin\options\functions\Coin_List'
- python - Pandas read_csv 给出十进制列数
- r - 我的情节中x轴的顺序有问题
- reactjs - 来自 react-jss 的带有 createUseStyles 的 TypeScript 类型
- python - ValueError:使用 a.empty、a.bool()、a.item()、a.any() 或 a.all()。在 Python 中读取 csv 时
- javascript - 动态拆分数组元素
- python - 烧瓶运行错误:无法导入“App”和“App.py”
- groovy - 在groovy中减去枚举元素
- javascript - 当我启动节点 server.js 发生这种情况
- flutter - 当我尝试将一个列表分配给一个列表时,为什么 .add() 方法不起作用