Как добавить класс для клика JS

Question

Как добавить класс для клика JS

Рейтинг: 0Ответов: 1Опубликовано: 28.01.2023

Есть такой код: 2 карточки с идентичными классами. В данный момент по клику новые классы добавятся к обоим картам, а нужно чтобы по клику на конкретную карточку на нее выполнялась функция и добавлялись классы, а вторая осталась в стандартном состоянии.

По условию менять классы на второй карточке и вешать второй обработчик нельзя. Код только на ванильном js. Как реализовать? Такой вариант возможен?:

function changeProp(event) {
  const card = event.target

  card.querySelector('.card-something').classList.toggle('some-class')
};

?

const card = document.querySelectorAll('.card');

const cardSlogan = document.querySelector('.card__slogan');
const cardText = document.querySelector('.card__text');
const cardImg = document.querySelector('.card__img');

function changeProp() {
  cardSlogan.forEach((el) => {
    el.classList.toggle('changeBorder');
  });

  cardText.forEach((el) => {
    el.classList.toggle('changeColor');
  });

  cardImg.forEach((el) => {
    el.classList.toggle('changeSize');
  });
}

card.addEventListener('click', changeProp);

  <section class="section-card">

  <div class="card">
    <div class="card__slogan"></div>
    <div class="card__text"></div>
    <div class="card__img"></div>
  </div>

  <div class="card">
    <div class="card__slogan"></div>
    <div class="card__text"></div>
    <div class="card__img"></div>
  </div>

  </section>

javascript

Источник: Stack Overflow на русском

Answer 1

▲ 0Принят

Если мы не можем вешать два слушателя, то нам нужно повесить слушатель на document (в лучшем случае, на контейнер, в котором будут находится данные элементы) и внутри проверять, был бы ли клик по элементу с классом card (Забыл как это называется). Если же клик был по элементу с таким классом, мы ищем в нем элементы с нужными нам классом и что-то делаем с ними.

function changeProp({target}) {
  if (target.classList.contains('card') === false) {
    return;
  }

  target.querySelector('.card__slogan')?.classList.toggle('changeBorder')
  target.querySelector('.card__text')?.classList.toggle('changeColor');
  target.querySelector('.card__img')?.classList.toggle('changeSize');
}

document.addEventListener('click', changeProp);

<div class="card">
  <div class="card__slogan"></div>
  <div class="card__text"></div>
  <div class="card__img"></div>
</div>

<div class="card">
  <div class="card__slogan"></div>
  <div class="card__text"></div>
  <div class="card__img"></div>
</div>

Как добавить класс для клика JS

Ответы