多张卡片独立翻转jQuery实现求助：点击后卡片无法回翻

看起来你现在的代码问题主要出在选中了所有卡片进行操作，而不是针对当前点击的那张，同时重复绑定了相同的事件处理逻辑，导致点击后无法正确单独控制卡片翻转。我来帮你修正这个问题：

问题分析 #

你的原代码里，每次点击都会对所有.card元素执行toggleClass('flipped')，这就意味着不管你点哪张，所有卡片都会一起翻转，而且逻辑顺序也不对——先移除其他卡片的类，再给所有卡片切换类，自然无法实现独立翻转和回翻。

修正方案 #

1. 统一事件绑定（简化代码） #

首先把重复的两个事件处理合并，如果你是用不同的类名绑定点击事件，可以用逗号分隔选择器；更推荐给所有触发翻转的元素统一一个类名，比如.js-card-trigger，这样更易维护。

2. 针对当前点击的卡片操作 #

用$(this)定位到当前点击的元素，再找到它对应的.card（如果点击的是卡片内部元素，就用closest('.card')向上查找父级卡片；如果点击的就是卡片本身，直接用$(this)即可）。

3. 可选：关闭其他已翻转的卡片 #

如果你需要实现“点击一张新卡片时，自动关闭之前翻转的卡片”，就保留移除其他卡片flipped类的逻辑；如果不需要这个交互，直接去掉那行代码即可。

完整示例代码 #

HTML结构（参考） #

<div class="flipContainer">
  <div class="card">
    <div class="card-front js-card-trigger">正面内容</div>
    <div class="card-back js-card-trigger">背面内容</div>
  </div>
  <div class="card">
    <div class="card-front js-card-trigger">正面内容2</div>
    <div class="card-back js-card-trigger">背面内容2</div>
  </div>
</div>

CSS（基础翻转样式） #

.flipContainer {
  display: flex;
  gap: 20px;
}
.card {
  width: 200px;
  height: 300px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s;
}
.card-front, .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ccc;
  border-radius: 8px;
}
.card-back {
  transform: rotateY(180deg);
  background-color: #f0f0f0;
}
.card.flipped {
  transform: rotateY(180deg);
}

JavaScript（核心逻辑） #

// 给所有触发元素绑定点击事件
$('.js-card-trigger').on('click', function() {
  // 找到当前点击元素对应的卡片
  const currentCard = $(this).closest('.card');
  
  // 可选：关闭其他已翻转的卡片（如果需要这个交互就保留，不需要就删掉）
  $('.card').not(currentCard).removeClass('flipped');
  
  // 切换当前卡片的翻转状态
  currentCard.toggleClass('flipped');
});

关键说明 #

• closest('.card')：会从当前元素开始向上查找，找到最近的.card父元素，确保我们操作的是当前点击的那张卡片，而不是所有卡片。
• toggleClass('flipped')：会自动判断当前元素是否有flipped类，有就移除（翻回去），没有就添加（翻过去），这样就实现了点击翻转、再点击回翻的效果。
• 如果你的点击触发元素就是.card本身，那可以把$(this).closest('.card')直接改成$(this)，代码会更简洁。

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