Как добавить класс всем элементам со значением data-атрибута равным значению data-атрибута выбранного элемента?

Question

Имеются элементы с data-атрибутами.

Пытаюсь реализовать следующее: При клике на элемент определяется значение его data-атрибута. Оно сравнивается со значениями data-атрибута остальных элементов. При равном значении этим элементам добавляется класс.

Но такой код не работает:

Подскажите, как это можно реализовать. Я только учусь и понимаю, что скорее всего делаю неправильно.

Answer 1

Я бы реализовал это следующим образом:

const cards = document.querySelectorAll(".card");

cards.forEach(card => {
  card.addEventListener("click", () => {
    const dataCard = card.dataset.card;

    cards.forEach(item => item.classList.remove("selected"));

    [...cards].filter(item => item.dataset.card === dataCard).map(item => item.classList.add("selected"));
  });
});

.cards {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.card {
  background-color: red;
  height: 20px;
  height: 20px;
  margin: 12px;
}

.selected {
  background-color: green;
}

<div class="cards">
  <div class="card" data-card="1">Data 1</div>
  <div class="card" data-card="1">Data 1</div>
  <div class="card" data-card="2">Data 2</div>
  <div class="card" data-card="1">Data 1</div>
  <div class="card" data-card="2">Data 2</div>
  <div class="card" data-card="1">Data 1</div>
  <div class="card" data-card="1">Data 1</div>
</div>

БЛОГ НА HUSL

Как добавить класс всем элементам со значением data-атрибута равным значению data-атрибута выбранного элемента?

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