如何修改代码实现同一页面多个div卡片翻转效果？

原代码里document.querySelector('.card')只会选中页面中第一个带.card类的元素，所以只有第一个卡片能翻转。要让所有卡片都生效，只需修改JavaScript部分，步骤如下：

• 用document.querySelectorAll('.card')获取所有卡片元素
• 遍历每个卡片，为它们单独绑定点击事件
• 在事件回调里用this操作当前被点击的卡片（避免全局变量的干扰）

修改后的完整代码 #

JavaScript #

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

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

CSS（仅微调排版，核心逻辑不变） #

.flip-box {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  margin: 10px; /* 新增margin避免卡片重叠 */
  display: inline-block;
}

.card {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 1s;
  transform-style: preserve-3d;
}

.flip-box-front,
.flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.flip-box-front {
  background-color: #bbb;
  color: black;
}

.flip-box-back {
  background-color: #333;
  color: white;
  transform: rotateY(180deg);
}

.card.is-flipped {
  transform: rotateY(180deg);
}

HTML（添加多个卡片示例） #

<div class="flip-box">
  <div class="card">
    <div class="flip-box-front">
      <h2>Front Side 1</h2>
      <p>点击翻转</p>
    </div>
    <div class="flip-box-back">
      <h2>Back Side 1</h2>
      <p>点击返回正面</p>
    </div>
  </div>
</div>

<div class="flip-box">
  <div class="card">
    <div class="flip-box-front">
      <h2>Front Side 2</h2>
      <p>点击翻转</p>
    </div>
    <div class="flip-box-back">
      <h2>Back Side 2</h2>
      <p>点击返回正面</p>
    </div>
  </div>
</div>

<div class="flip-box">
  <div class="card">
    <div class="flip-box-front">
      <h2>Front Side 3</h2>
      <p>点击翻转</p>
    </div>
    <div class="flip-box-back">
      <h2>Back Side 3</h2>
      <p>点击返回正面</p>
    </div>
  </div>
</div>

补充说明 #

• querySelectorAll返回NodeList集合，用forEach遍历即可为每个卡片绑定事件（兼容所有现代浏览器）
• 用this替代全局变量，确保每次点击只操作当前被触发的卡片，不会出现批量翻转的问题
• CSS里的inline-block和margin是为了让卡片横向排列更美观，不影响核心翻转功能

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