Как правильно сделать фильтрацию контента?

Question

Вопрос собственно не очень сложный, мне кажется. Я только обучаюсь :) Вкратце, есть 10 карточек, одни, условно, синие, другие - красные. У этих карточек есть 2 класса, 1-й класс cards, который задает им размеры, бордер, синий цвет и т.д. 2-й класс cards--red, который перебивает только синий цвет красным. Так же есть чекбокс, при нажатии на который на странице должны отображаться только красные карточки. Думал сделать довольно просто, дать какой-нибудь переменной querySelectorAll('.cards'), после чего обработать нажатие на чекбокс addEventListener, чтобы к карточкам с классом .cards добавлялся класс .cards--inactive (который заранее есть в css с display: none). Однако, как оказалось, querySelectorAll особо не разбирается 1 класс у блока, или 2, и загребает ноду сразу же как находит cards) По итогу при нажатии на чекбокс отключаются все карточки, т.к. класс cards--inactive с display:none добавляется ко всем карточкам. Вот собственно и вопрос, как можно такое провернуть?) Только html,css,js. Заранее спасибо всем за ответы.

Answer 1

Накидал на скорую руку, уверен, что Вы сможете подогнать под себя. Код:

// JS
const cards = document.querySelectorAll(".card")
const checkbox = document.querySelector(".checkbox")



checkbox.addEventListener('change', () => {
  for (let i = 0; i < cards.length; i++) {
    if (cards[i].className !== 'card red' && checkbox.checked) {
      cards[i].classList.add("inactive");
    } else {
      cards[i].classList.remove("inactive");
    }
  }
})

/* CSS */
.container {
  display: flex;
  justify-content: space-around;
}

.card {
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
  background-color: blue;
}

.red {
  background-color: red;
}

.checkbox {
  width: 30px;
  height: 30px;
  border: 1px solid #fff;
}

.inactive {
  display: none;
}

<!-- HTML -->
<div class="container">
  <div class="card red"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card red"></div>
  <div class="card"></div>
</div>

<div class="container">
  <input type="checkbox" class="checkbox">
</div>

Поиграться с кодом можно тут: https://codepen.io/listopad02/pen/eYKLQwm

P.S. в следующий раз прилагайте свой код, чтобы задача была более понятна. Тут так принято

БЛОГ НА HUSL

Как правильно сделать фильтрацию контента?

Ответы (1 шт):