Как анимировать объекты JQuery отдельно

Question

У меня есть анимация jQuery, которая превращает флешку. Это HTML:

<div class="stage"> 
<div class="flashcard"> 
    <div class="front"> 
    <p>Front</p> 
    </div> 
    <div class="back"> 
    <p>Back</p> 
    </div> 
</div> 

Это мой CSS:

.stage { 
    -webkit-perspective: 1000;     
} 

.flashcard { 
    height: 300px; 
    width: 500px; 
    margin: 10% auto;            
    border: 1px solid gray;       
    box-shadow: 2px 2px 2px #000; 
    -webkit-transform-style: preserve-3d;         
    transition: all 0.3s;        
    -webkit-transition: all 0.3s; 
} 

.flipped, .back { 
    transform: rotateX(180deg); 
    -webkit-transform: rotateX(180deg);      
} 

.front, .back { 
    position: absolute; 
    -webkit-backface-visibility: hidden;   
    height: 300px;         
    width: 500px; 
    text-align: center; 
} 

.front p, .back p { 
    margin-top: 25%; 
    font-size: 3em; 
} 

И это мой JQuery код:

$(document).ready(function() { 
$('.flashcard').on('click', function() { 
$('.flashcard').toggleClass('flipped'); 
}); 
}); 

Я сделал цикл с PHP для цикла мой HTML кода, поэтому он может отображать сразу несколько карточек. Проблема в том, что если я нажимаю на случайную флеш-карту, все карточные карточки сразу поворачиваются.

Что мне нужно изменить в моем коде, чтобы убедиться, что только щелкнула флеш-карта?

Answer 1

Просьба использовать $(this) не $(".flashcard") на toggleClass() функция. Потому что на вашем скрипте вы буквально переключаете весь класс. Используйте это для запуска события на конкретном элементе, который вы хотите вызвать.

Answer 2

вот рабочий код http://codepen.io/mozzi/pen/akwVrg

Я изменить JavaScript для

$(document).ready(function() { 
$('.flashcard').on('click', function() { 
$(this).toggleClass('flipped'); 
}); 
});