如何分别动画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'); 
}); 
});