求助：实现点击对应卡片翻转功能，当前仅首张卡片可翻转

嘿，我明白你的困扰啦——现在只有第一张卡片能触发翻转，其他卡片点击没反应，对吧？这是因为你用了document.querySelector('.card')，它只会匹配页面上第一个类名为card的元素，所以只有首张卡片绑定了点击事件。下面给你两种实用的修改方案，都能实现点击对应卡片翻转的效果：

方案一：遍历所有卡片绑定事件 #

这种方法适合卡片数量固定的场景，直接给每一张卡片单独绑定点击事件：

修改后的HTML（示例16张卡片结构） #

<div class="scene">
  <div class="card">
    <div class="card__face card__face--front">front 1</div>
    <div class="card__face card__face--back">back 1</div>
  </div>
  <div class="card">
    <div class="card__face card__face--front">front 2</div>
    <div class="card__face card__face--back">back 2</div>
  </div>
  <!-- ... 重复到16张卡片 -->
</div>

修改后的JavaScript #

// 获取页面上所有的.card元素
const cards = document.querySelectorAll('.card');

// 遍历每张卡片，绑定点击事件
cards.forEach(card => {
  card.addEventListener('click', function() {
    // 切换当前点击卡片的is-flipped类
    this.classList.toggle('is-flipped');
  });
});

原理：document.querySelectorAll('.card')会返回所有匹配的卡片元素，然后通过forEach循环给每一张卡片都绑定点击事件。事件处理函数里的this指代当前被点击的卡片，这样就能精准翻转你点击的那一张啦。

方案二：事件委托（更高效推荐） #

如果你的卡片数量较多（比如16张），或者后续可能动态添加卡片，推荐用事件委托的方式——把点击事件绑定到父容器上，通过事件冒泡来判断点击的目标卡片，性能更优：

修改后的JavaScript #

// 获取卡片的父容器.scene
const sceneContainer = document.querySelector('.scene');

// 给父容器绑定点击事件
sceneContainer.addEventListener('click', function(event) {
  // 从点击的元素往上找最近的.card元素
  const targetCard = event.target.closest('.card');
  
  // 如果找到了对应的卡片，就切换翻转类
  if (targetCard) {
    targetCard.classList.toggle('is-flipped');
  }
});

原理：事件委托利用了DOM事件冒泡的特性，只需要给父容器绑定一次事件，不管点击的是卡片本身还是卡片内部的正面/背面元素，event.target.closest('.card')都会找到对应的卡片元素，然后触发翻转。这种方法不用给每一张卡片都绑事件，即使后续新增卡片也能直接生效。

确保CSS翻转效果生效 #

最后别忘了确认你的CSS包含这些关键属性，否则翻转效果不会显示：

.scene {
  width: 200px;
  height: 260px;
  perspective: 600px; /* 开启3D空间，必须项 */
}

.card {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 0.6s ease;
  transform-style: preserve-3d; /* 保留3D变换 */
}

.card.is-flipped {
  transform: rotateY(180deg); /* 翻转180度 */
}

.card__face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; /* 隐藏元素的背面 */
  /* 可以加一些样式让卡片更直观，比如背景色 */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.card__face--front {
  background: #f0f0f0;
}

.card__face--back {
  background: #2ecc71;
  color: white;
  transform: rotateY(180deg); /* 初始时背面翻转180度，隐藏起来 */
}

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