0

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

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

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

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

2
  • 1
    у вас в условии clicked.stars (dataset забыли) -> clicked.dataset.stars Commented 28 апр. 2022 в 11:17
  • вот балда! спасибо!!
    – horoshere
    Commented 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
    Commented 28 апр. 2022 в 11:28
  • @horoshere вам точно нужен такой результат? Имею ввиду, что в данном случае будут выделены все, если нажать на разные элементы. Я думал вы хотели, чтобы при нажатии на другой элемент пропадали пометки предыдущих и выставлялись на новые
    – EzioMercer
    Commented 28 апр. 2022 в 11:31
  • @horoshere На счёт вопроса, а потом при повторном нажатии чтобы вернулись все остальные элементы?
    – EzioMercer
    Commented 28 апр. 2022 в 11:34
  • @EzioMercer да, вы правы. Я бы хотел чтобы при нажатии на другой элемент пропадали пометки предыдущих. Но это промежуточный результат. В конечном итоге пытаюсь получить чтобы при нажатии на элемент оставались, в данном случае, команды с таким же data-status как у выбранного, а остальные удалялись.
    – horoshere
    Commented 28 апр. 2022 в 11:37
  • @horoshere Понятно, а как потом выбрать другие? Повторно надо нажать на один из оставшихся, чтобы пропал выбор и показались все?
    – EzioMercer
    Commented 28 апр. 2022 в 11:43

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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