如何根据选择进行过滤？

Question

请告诉我如何过滤并只保留块 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>

Answer 1

试试这个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 因为它们要快得多

我尽量不去碰你已经写好的代码