求助：实现一键翻转所有hover flip card的按钮功能

原代码的问题说明 #

1. 变量名不能用连字符，flip-card 这种写法在JS里会被解析成减法，得改成合法的变量名，比如 flipCardElements
2. 获取类名元素的方法写错了，应该是 document.getElementsByClassName（注意末尾的Elements是复数），这个方法返回的是一个元素集合，不能直接给整个集合加事件监听
3. 函数里的card变量未定义，而且你要切换的应该是一个专门用于翻转的类，而不是flip-card-inner这个结构类，否则会破坏卡片的布局

完整实现代码 #

HTML 结构（修正后）

<body>
  <button type="button" class="flipCard">Flip all</button>
  <p></p>
  <!-- 示例卡片，可复制多个 -->
  <div class="flip-card">
    <div class="flip-card-inner">
      <div class="flip-card-front">
        <h5>Title</h5>
      </div>
      <div class="flip-card-back">
        <ul style="font-size: 10pt;">
          <li>Some text</li>
        </ul>
      </div>
    </div>
  </div>

  <!-- 将脚本放在body末尾，确保DOM已加载 -->
  <script>
    // 获取一键翻转按钮
    const flipAllBtn = document.querySelector('.flipCard');
    // 获取所有卡片内部容器
    const flipCardElements = document.getElementsByClassName('flip-card-inner');

    // 给按钮添加点击事件
    flipAllBtn.addEventListener('click', function() {
      // 遍历所有卡片，切换flipped类
      for (let card of flipCardElements) {
        card.classList.toggle('flipped');
      }
    });
  </script>
</body>

CSS 样式（包含hover和强制翻转效果）

/* 卡片容器基础样式 */
.flip-card {
  width: 200px;
  height: 150px;
  perspective: 1000px; /* 3D透视效果 */
  margin: 10px;
  display: inline-block;
}

/* 卡片内部容器，负责翻转 */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

/* hover时翻转卡片 */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* 按钮触发的翻转类 */
.flip-card-inner.flipped {
  transform: rotateY(180deg);
}

/* 卡片正反面样式，隐藏背面 */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* 兼容webkit内核浏览器 */
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ccc;
  border-radius: 8px;
}

.flip-card-front {
  background-color: #f9f9f9;
  color: black;
}

.flip-card-back {
  background-color: #2980b9;
  color: white;
  transform: rotateY(180deg);
}

关键说明 #

• 新增了flipped类，专门用于控制按钮触发的翻转，和hover效果互不冲突
• 用for...of遍历所有卡片元素，逐个切换类实现批量翻转
• 脚本放在body末尾，确保能正确获取到页面元素
• 保留了原有的hover翻转效果，同时新增一键翻转功能

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