Javascript 简单JQuery闪存卡

我需要帮助构建jQuery闪存卡

现在，每个闪存卡都有一个正面div和背面div。当用户单击正面时，它应该隐藏正面并显示背面。现在的问题是，只需单击一下，所有边都会显示出来

当用户单击一张卡时，会显示所有其他卡（不好）。
我做错了什么

$（“.flashcard FRONT”）。单击（函数（）{
$（this.css（“显示”、“无”）；
$（“.flashcard BACK”）.css（“显示”、“内联块”）；
});
.holder{
文本对齐：居中；
}
.抽认卡正面{
背景#2b2b；
宽度：200px；
高度：200px；
显示：内联块；
填充：30px；
颜色：#FFF；
文本对齐：居中；
利润率：0px 5px；
边框：7px#FFF实心；
盒影：1px 1px 4px 0px#00000042；
}
.倒叙卡{
背景：#FFF；
宽度：200px；
高度：200px；
显示：无；
填充：30px；
颜色：#2b2b；
文本对齐：居中；
利润率：0px 5px；
边框：7px#2b2b实心；
盒影：1px 1px 4px 0px#00000042；
}

招聘决定
招聘决定
利用面试资源做出最佳招聘决策，建立多元化团队

招聘决定
招聘决定
利用面试资源做出最佳招聘决策，建立多元化团队

招聘决定
招聘决定
利用面试资源做出最佳招聘决策，建立多元化团队

一种解决方案是使用jQuery.next（）函数：

$( ".flashcard-FRONT" ).click(function() {
  $(this).css("display", "none");
  $(this).next().css("display", "inline-block");
});

如果我必须这样做，我会将所有对包装到一个div包装器中，然后单击将父包装器和前卡放入包装器中。对于这个解决方案，div的顺序一点也不重要。
一个解决方案是使用jQuery.next（）函数：

$( ".flashcard-FRONT" ).click(function() {
  $(this).css("display", "none");
  $(this).next().css("display", "inline-block");
});

如果我必须这样做，我会将所有对包装到一个div包装器中，然后单击将父包装器和前卡放入包装器中。使用此解决方案，div的顺序一点也不重要。
您的单击事件处理程序使用“flashcard BACK”类选择所有div。您需要将其更改为仅选择所需的一个。使用当前标记，可以通过替换以下内容来完成此操作：

$(".flashcard-BACK").css("display", "inline-block");

与

但是，你可以考虑把每个卡，包括前面和后面的父div，像这样：
<div class="card">
  <div class="front">...</div>
  <div class="back">...</div>
</div>

单击事件处理程序正在使用“flashcard BACK”类选择所有div。您需要将其更改为仅选择所需的一个。使用当前标记，可以通过替换以下内容来完成此操作：

$(".flashcard-BACK").css("display", "inline-block");

与

但是，你可以考虑把每个卡，包括前面和后面的父div，像这样：
<div class="card">
  <div class="front">...</div>
  <div class="back">...</div>
</div>

谢谢你，吉米·贝克！我听从了你的建议，但现在出现了一个新问题。我的牌跳来跳去，没有完全对齐。你也能帮我处理CSS逻辑吗？若要将闪存卡与顶部对齐，请将每个闪存卡的样式设置为“垂直对齐：顶部；”。谢谢，@jimmybaker！我听从了你的建议，但现在出现了一个新问题。我的牌跳来跳去，没有完全对齐。你也能帮我处理CSS逻辑吗？要将闪存卡与顶部对齐，请将每个闪存卡的样式设置为“垂直对齐：顶部；”。