jQuery闪卡异常求助：点击单张卡片触发全部翻转如何解决？

嘿，我来帮你搞定这个闪卡的问题！

你现在的代码里，当点击任意一张卡片的正面时，$(".flashcard-BACK")会选中页面上所有class为flashcard-BACK的元素，所以所有卡片的背面都会同时弹出来，这就是为啥点一张卡全变了的原因～

核心就是：只操作当前点击卡片对应的那一个背面元素，而不是全局选中所有背面。这里给你几个实用的实现方式：

方式1：利用兄弟元素定位 #

如果你的正面和背面是同级元素（比如都在同一个.holder容器里），用siblings()就能精准找到对应的背面：

$(".flashcard-FRONT").click(function() {
  $(this).css("display", "none");
  // 只找当前正面的兄弟里的flashcard-BACK
  $(this).siblings(".flashcard-BACK").css("display", "inline-block");
});

方式2：通过父容器锁定范围 #

如果你的DOM结构里，每张闪卡的正反两面都被包裹在同一个.holder里，这种方法更稳妥，就算后续调整元素结构也不容易失效：

$(".flashcard-FRONT").click(function() {
  $(this).css("display", "none");
  // 先找到当前正面的父容器.holder，再在里面找对应的背面
  $(this).closest(".holder").find(".flashcard-BACK").css("display", "inline-block");
});

方式3：直接找相邻元素（如果结构固定） #

要是你的DOM里，每张flashcard-FRONT后面直接跟着对应的flashcard-BACK，用next()会更简洁：

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

• 想实现点击背面切回正面的话，可以用toggle()简化逻辑：

  $(".flashcard-FRONT, .flashcard-BACK").click(function() {
    $(this).closest(".holder").find(".flashcard-FRONT, .flashcard-BACK").toggle();
  });
  

• 建议用CSS类来控制显示隐藏，比直接操作css()更好维护。比如先定义：

  .hidden { display: none; }
  

  然后JS里用toggleClass("hidden")来切换状态，代码更干净～

内容的提问来源于stack exchange，提问作者Matie