Javascript 如何分别设置Jquery对象的动画

我有一个jQuery动画，可以打开一个抽认卡。这是HTML：

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

这是我的jQuery代码：

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

我用PHP做了一个For循环来循环我的HTML代码，所以它可以一次显示多个抽认卡。问题是，如果我点击一张随机的抽认卡，所有的抽认卡都会同时打开

我必须在代码中更改哪些内容才能确保只有单击的flashcard才能打开？

尝试使用

$（此）

而不是

$（“.flashcard”）

上的

切换类（）

函数。因为在您的脚本中，您实际上是在切换所有类。使用它在您想要触发的特定元素上触发事件。

以下是一个工作代码

我已将javascript更改为

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

尝试在

toggleClass（）

函数上使用

$（this）

而不是

$（“.flashcard”）

。因为在您的脚本中，您实际上是在切换所有类。

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