個別に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'); 
}); 
}); 

私は私のHTMLループにPHPでループのために作られましたそれで、一度に複数のフラッシュカードを表示することができます。問題は、ランダムなフラッシュカードをクリックすると、すべてのフラッシュカードが一度に回転することです。

クリックしたフラッシュカードだけが変わることを確認するには、コードで何を変更しなければなりませんか？

Answer 1

toggleClass()機能で$(this)ではなく、$(".flashcard")を試してみてください。スクリプト上では、文字通りすべてのクラスを切り替えるためです。それを使用して、トリガーしたい特定の要素のイベントを発生させます。ここ

Answer 2

は、私は `toggleClassに` `$（この）`ない `$を使用してみてください（ "フラッシュカード"）

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