Javascript 如何将类动画限制为单击的元素及其内容

我知道这个问题已经被问到和回答了，但这里有一个稍微复杂一点的情况。我有一张卡片列表，所有卡片都设置为单击后动画。当然，动画是通过使用

toggleClass（）

命令创建的，最初的问题是，如果我单击一张卡，所有卡都会动画。这可以通过使用

$（This）

语句轻松解决。然而，我随后决定向卡片中添加内容，只有在单击卡片时才会显示内容。我原以为这也会受到$（this）语句的影响，但事实并非如此，现在当我单击一张卡时，该卡会显示动画，但其他卡的内容也会显示出来

$（“.card”）。单击（函数（）{
$（this.toggleClass（“转换活动”）；
$（“消失”）.toggleClass（“出现”）；
});
/*卡部分*/
.卡片{
显示：块；
位置：绝对位置；
宽度：100%；
顶部：60px；
列表样式：无；
文字装饰：无；
z指数：-1；
}
李先生{
显示：块；
位置：相对位置；
宽度：100%；
垫底：10px；
}
.卡片{
位置：相对位置；
背景色：#ffffff；
高度：150像素；
宽度：100%；
左-5%；
边界半径：8px；
盒影：2PX2PX2PX#686868；
光标：指针；
}
/*卡片内容组*/
#包含文本{
位置：绝对位置；
宽度：76%；
颜色：#58a7dd；
顶部：-2px；
左：90px；
文本对齐：对齐；
}
#包含文本p{
位置：绝对位置；
顶部：30px；
}
.脸{
位置：相对位置；
高度：70像素；
宽度：70px；
顶部：10px；
左：10px；
边框：实心#58a7dd；
背景色：白色；
边界半径：50%；
颜色：#58a7dd；
}
.面h2{
位置：相对位置；
左：3px；
顶部：20px；
变换：旋转（90度）；
}
.额外的{
位置：相对位置；
宽度：90%；
顶部：7px；
保证金：自动；
颜色：#2f4f4f；
}
.消失{
位置：相对位置；
宽度：90%；
身高：40%；
顶部：5px；
保证金：自动；
颜色：#2f4f4f；
不透明度：0；
}
.出现{
动画：出现1.2秒轻松；
动画填充模式：正向；
}
@出现关键帧{
0% {
不透明度：0；
}
100% {
不透明度：1；
}
}
.变换{
-webkit过渡：所有0.2秒轻松；
-moz转换：所有0.2s的易用性；
-o型过渡：所有0.2s的缓变；
-ms转换：所有0.2s的易用性；
过渡：所有0.2秒缓解；
}
.变换激活{
背景色：#ffffff；
高度：300px；
宽度：100%；
盒影：6px 6px 6px#8888888；
}



: )
你好我是一张卡片。

单击我以触发动画

这里有一些关于这张卡片上的物品的额外信息，比如东西，东西等等

知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作



两个


三


四


五


六

您需要更改：

$(".card").click(function() {
  $(this).toggleClass("transform-active");
  $(".disappear").toggleClass("appear");
});

致：

这样，在当前单击的元素中，您将只针对类为
的
元素


$（“.card”）。单击（函数（）{
$（this.toggleClass（“转换活动”）；
$（this.find（“.define”）.toggleClass（“出现”）；
});
.cards
{
保证金：0；
填充：0；
列表样式：无；
文字装饰：无；
}
李先生
{
宽度：100%；
垫底：10px；
}
卡片
{
背景色：#ffffff；
高度：150像素；
宽度：100%；
填充：6px 12px；
边界半径：8px；
盒影：2PX2PX2PX#686868；
光标：指针；
}
/*卡片内容组*/
#包含文本
{
位置：绝对位置；
宽度：76%；
颜色：#58a7dd；
顶部：-2px；
左：120px；
文本对齐：对齐；
}
#包含文本p
{
位置：绝对位置；
顶部：30px；
}
面对
{
高度：70像素；
宽度：70px；
边框：实心#58a7dd；
背景色：白色；
边界半径：50%；
颜色：#58a7dd；
}
.面h2
{
位置：相对位置；
左：3px；
顶部：20px；
变换：旋转（90度）；
}
.额外的
{
位置：相对位置；
宽度：90%；
顶部：7px；
保证金：自动；
颜色：#2f4f4f；
}
.消失
{
位置：相对位置；
宽度：90%；
身高：40%；
顶部：5px；
保证金：自动；
颜色：#2f4f4f；
不透明度：0；
}
.出现
{
动画：出现1.2秒轻松；
动画填充模式：正向；
}
@出现关键帧
{
0%
{
不透明度：0；
}
100%
{
不透明度：1；
}
}
使改变
{
-webkit过渡：所有0.2秒轻松；
-moz转换：所有0.2s的易用性；
-o型过渡：所有0.2s的缓变；
-ms转换：所有0.2s的易用性；
过渡：所有0.2秒缓解；
}
.变换激活
{
背景色：#ffffff；
高度：300px；
宽度：100%；
盒影：6px 6px 6px#8888888；
}



: )
你好我是一张卡片。

单击我以触发动画

这里有一些关于这张卡片上的物品的额外信息，比如东西，东西等等

知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作


两个
三
四
五
六
您需要更改：

$(".card").click(function() {
  $(this).toggleClass("transform-active");
  $(".disappear").toggleClass("appear");
});

致：

这样，在当前单击的元素中，您将只针对类为
的
元素


$（“.card”）。单击（函数（）{
$（this.toggleClass（“转换活动”）；
$（this.find（“.define”）.toggleClass（“出现”）；
});
.cards
{
保证金：0；
填充：0；
列表-s
$(".disappear").toggleClass("appear");

$(this).children('.disappear').toggleClass('appear');

$(".card").click(function()
{
  $(this).toggleClass("transform-active");
  $(".disappear", this).toggleClass("appear");
});