如何分別動畫jQuery對象

Question

我有一個jQuery動畫，可以打開flashcard。這是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代碼，所以它可以一次顯示多個flashcard。問題是，如果我點擊隨機閃卡，所有閃卡都會立即打開。

我必須在我的代碼中更改哪些內容才能確保只點擊閃卡轉身？

Answer 1

嘗試使用$(this)而不是$(".flashcard")的toggleClass()功能。因爲在你的腳本上，你正在切換所有的類。用它來觸發你想要觸發的特定元素上的事件。

Answer 2

這裏是在`toggleClass工作代碼 http://codepen.io/mozzi/pen/akwVrg

我已經JavaScript的改變

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