Клик на родителя для добавления новых классов потомкам

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

В данный момент чтобы к потомкам применились новые классы, нужно найти область на экране с родителем .card-cats и кликнуть по нему, как реализовать чтобы можно было кликать в любое место в границах карточки и добавились классы на потомков?

const cardCats = document.querySelector('.card-section');

function changeColorCard(event) {

  if (event.target && event.target.classList.contains('card-cats')) {
    event.target.querySelector('.card-cats__slogan').classList.toggle('changeBorder')
    event.target.querySelector('.card-cats__triangle').classList.toggle('changeBorderGradient')
    event.target.querySelector('.card-cats__main').classList.toggle('changeBorder')
    event.target.querySelector('.card-cats__image-circle').classList.toggle('changeBackground')
  }

};


cardCats.addEventListener('click', changeColorCard);
.card-section {
  width 100%;
  display: flex;
  justify-content: space-evenly;
}

.card-cats {
  width: 40%;
  border: 2px solid orange;
}

.card-cats__head {
  display: flex;
  justify-content: center;
  background-color: green;
}

.changeBorder {
  color: #D91667;
  background-color: orange;
}
.changeBorderGradient {
  font-size 100px;
 }
    
.changeBackground {
  background-color: #D91667;
}
<div class="card-section">

        <div class="card-cats">
          <div class="card-cats__head">
            <div class="card-cats__triangle"></div>
            <h3 class="card-cats__slogan"><span>Сказочное заморское яство</span></h3>
          </div>

          <div class="card-cats__main">
            <h3 class="card-cats__title">Товар 1</h3>
            <p class="card-cats__subtitile">с рыбой</p>
            <ul class="card-cats__properti">
              <li class="card-cats__properti-item">40 порций</li>
              <li class="card-cats__properti-item">2 мыши в подарок</li>
            </ul>

            <img class="card-cats__image-cat" src="img/home/section-card/cats-logo.svg">
            <div class="card-cats__image-circle">
              <p class="card-cats__image-circle-top">2</p>
              <p class="card-cats__image-circle-bottom">кг</p>
            </div>
          </div>

          <span class="card-cats__bottom">
            Чего сидишь? порадуй кота, 
            <span class="card-cats__bottom-btn">
              <a href="#0" class="card-cats__bottom-btn-link"> купи</a>.
            </span>
          </span>
        </div>
        
                <div class="card-cats">
          <div class="card-cats__head">
            <div class="card-cats__triangle"></div>
            <h3 class="card-cats__slogan"><span>Сказочное заморское яство</span></h3>
          </div>

          <div class="card-cats__main">
            <h3 class="card-cats__title">Товар 2</h3>
            <p class="card-cats__subtitile">с мясом</p>
            <ul class="card-cats__properti">
              <li class="card-cats__properti-item">40 порций</li>
              <li class="card-cats__properti-item">2 мыши в подарок</li>
            </ul>

            <img class="card-cats__image-cat" src="img/home/section-card/cats-logo.svg">
            <div class="card-cats__image-circle">
              <p class="card-cats__image-circle-top">2</p>
              <p class="card-cats__image-circle-bottom">кг</p>
            </div>
          </div>

          <span class="card-cats__bottom">
            Чего сидишь? порадуй кота, 
            <span class="card-cats__bottom-btn">
              <a href="#0" class="card-cats__bottom-btn-link"> купи</a>.
            </span>
          </span>
        </div>

      </div>

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

Ответы

▲ 1Принят

Воспользуйтесь для этого методом .closest(), он вам вернет либо ближайший элемент с нужным селектором либо null.

const cardCats = document.querySelector('.card-section');

function changeColorCard(event) {
  const target = event.target.closest('.card-cats');
  
  if (target === null) {
    return;
  }
  
  target.querySelector('.card-cats__slogan').classList.toggle('changeBorder')
  target.querySelector('.card-cats__triangle').classList.toggle('changeBorderGradient')
  target.querySelector('.card-cats__main').classList.toggle('changeBorder')
  target.querySelector('.card-cats__image-circle').classList.toggle('changeBackground')
};


cardCats.addEventListener('click', changeColorCard);
.card-section {
  width 100%;
  display: flex;
  justify-content: space-evenly;
}

.card-cats {
  width: 40%;
  border: 2px solid orange;
}

.card-cats__head {
  display: flex;
  justify-content: center;
  background-color: green;
}

.changeBorder {
  color: #D91667;
  background-color: orange;
}
.changeBorderGradient {
  font-size 100px;
 }
    
.changeBackground {
  background-color: #D91667;
}
<div class="card-section">

        <div class="card-cats">
          <div class="card-cats__head">
            <div class="card-cats__triangle"></div>
            <h3 class="card-cats__slogan"><span>Сказочное заморское яство</span></h3>
          </div>

          <div class="card-cats__main">
            <h3 class="card-cats__title">Товар 1</h3>
            <p class="card-cats__subtitile">с рыбой</p>
            <ul class="card-cats__properti">
              <li class="card-cats__properti-item">40 порций</li>
              <li class="card-cats__properti-item">2 мыши в подарок</li>
            </ul>

            <img class="card-cats__image-cat" src="img/home/section-card/cats-logo.svg">
            <div class="card-cats__image-circle">
              <p class="card-cats__image-circle-top">2</p>
              <p class="card-cats__image-circle-bottom">кг</p>
            </div>
          </div>

          <span class="card-cats__bottom">
            Чего сидишь? порадуй кота, 
            <span class="card-cats__bottom-btn">
              <a href="#0" class="card-cats__bottom-btn-link"> купи</a>.
            </span>
          </span>
        </div>
        
                <div class="card-cats">
          <div class="card-cats__head">
            <div class="card-cats__triangle"></div>
            <h3 class="card-cats__slogan"><span>Сказочное заморское яство</span></h3>
          </div>

          <div class="card-cats__main">
            <h3 class="card-cats__title">Товар 2</h3>
            <p class="card-cats__subtitile">с мясом</p>
            <ul class="card-cats__properti">
              <li class="card-cats__properti-item">40 порций</li>
              <li class="card-cats__properti-item">2 мыши в подарок</li>
            </ul>

            <img class="card-cats__image-cat" src="img/home/section-card/cats-logo.svg">
            <div class="card-cats__image-circle">
              <p class="card-cats__image-circle-top">2</p>
              <p class="card-cats__image-circle-bottom">кг</p>
            </div>
          </div>

          <span class="card-cats__bottom">
            Чего сидишь? порадуй кота, 
            <span class="card-cats__bottom-btn">
              <a href="#0" class="card-cats__bottom-btn-link"> купи</a>.
            </span>
          </span>
        </div>

      </div>