Перевернуть карточку JS

Question

Подскажите,как перевернуть карточку при нажатии на div rotate? Данный код переворачивает все карточки одновременно ,а мне нужно по отдельности

    ```
    let containerItem = document.querySelectorAll('.container__item')
    let rotate = document.querySelectorAll('.rotate');

    rotate.forEach((a)=>a.addEventListener('click', flipCard));
    function flipCard(){
    containerItem.forEach((a)=>a.style.transform = 'rotateY(180deg)');
    }
    ```
    <div class="container__item">
      <div class="container__item__front">
        <div class="rotate"></div>
        <img class="img" src="https://english-for- 
        kids.netlify.com/static/media/hug.9dda3c46.jpg" alt="">
        <p class="imgText">hug</p>
     </div>
    <div class="container__item__back">
       <img class="img" src="https://english-for- 
       kids.netlify.com/static/media/hug.9dda3c46.jpg" alt="">
       <p class="imgText">обнимать</p>
   </div>
</div>

 <div class="container__item">
   <div class="container__item__front">
      <img class="img" src="https://english-for- 
       kids.netlify.com/static/media/jump.ac945820.jpg" alt="">
       <p class="imgText">jump</p>
       <div class="rotate"></div>
   </div>

<div class="container__item__back">
  <img class="img" src="https://english-for- 
   kids.netlify.com/static/media/jump.ac945820.jpg" alt="">
  <p class="imgText">прыгать</p>
</div>

Answer 1

let containerItem = document.querySelectorAll('.container__item');
let rotate = document.querySelectorAll('.rotate');

rotate.forEach((a) => a.addEventListener('click', flipCard));

function flipCard(a) {
  containerItem[+a.target.getAttribute('data-target')].style.transform = 'rotateY(180deg)';
}

<div class="container__item">
  <div class="container__item__front">
    <div class="rotate" data-target=0>повернуть</div>
    <img class="img" src="https://english-for- 
        kids.netlify.com/static/media/hug.9dda3c46.jpg" alt="">
    <p class="imgText">hug</p>
  </div>
  <div class="container__item__back">
    <img class="img" src="https://english-for- 
       kids.netlify.com/static/media/hug.9dda3c46.jpg" alt="">
    <p class="imgText">обнимать</p>
  </div>
</div>

<div class="container__item">
  <div class="container__item__front">
    <img class="img" src="https://english-for- 
       kids.netlify.com/static/media/jump.ac945820.jpg" alt="">
    <p class="imgText">jump</p>
    <div class="rotate" data-target=1>повернуть</div>
  </div>

  <div class="container__item__back">
    <img class="img" src="https://english-for- 
   kids.netlify.com/static/media/jump.ac945820.jpg" alt="">
    <p class="imgText">прыгать</p>
  </div>

БЛОГ НА HUSL

Перевернуть карточку JS

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