0

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

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

Но такой код не работает: результ

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

2
  • 1
    у вас в условии clicked.stars (dataset забыли) -> clicked.dataset.stars 28 апр 2022 в 11:17
  • вот балда! спасибо!!
    – horoshere
    28 апр 2022 в 11:19

1 ответ 1

2

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

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>

9
  • Спасибо! Плохо знаю методы перебора массива) Подскажите, а как можно сделать вместо добавления класса - удалить все элементы, у которых значение data-аттрибута не равно элементу события?
    – horoshere
    28 апр 2022 в 11:28
  • @horoshere вам точно нужен такой результат? Имею ввиду, что в данном случае будут выделены все, если нажать на разные элементы. Я думал вы хотели, чтобы при нажатии на другой элемент пропадали пометки предыдущих и выставлялись на новые
    – EzioMercer
    28 апр 2022 в 11:31
  • @horoshere На счёт вопроса, а потом при повторном нажатии чтобы вернулись все остальные элементы?
    – EzioMercer
    28 апр 2022 в 11:34
  • @EzioMercer да, вы правы. Я бы хотел чтобы при нажатии на другой элемент пропадали пометки предыдущих. Но это промежуточный результат. В конечном итоге пытаюсь получить чтобы при нажатии на элемент оставались, в данном случае, команды с таким же data-status как у выбранного, а остальные удалялись.
    – horoshere
    28 апр 2022 в 11:37
  • @horoshere Понятно, а как потом выбрать другие? Повторно надо нажать на один из оставшихся, чтобы пропал выбор и показались все?
    – EzioMercer
    28 апр 2022 в 11:43

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.