Tolong beri tahu saya bagaimana saya bisa memfilter dan hanya menyisakan kartu-kartu itu di blok 3 yang akan sesuai dengan pilihan di blok pertama dan kedua. (blok pertama dan kedua independen satu sama lain, hasil di blok ketiga tergantung pada pilihan di dua yang pertama)

Item pertama dipilih secara default. Jika ada lebih dari 4 kartu di blok ketiga, maka tunjukkan 4 kartu pertama, dan sembunyikan sisanya.

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>
-1
Imp3l 11 Mei 2021, 17:05

1 menjawab

Jawaban Terbaik

Coba kode javascript ini

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"
    }
  }
}

Itu hanya mengulangi elemen dan menyembunyikan tidak aktif

Omong-omong, jangan gunakan querySelector, gunakan .getElementsByClassName/.getElementById karena lebih cepat

Saya mencoba untuk tidak menyentuh kode yang sudah Anda tulis sebanyak mungkin

0
Allure 11 Mei 2021, 15:05