求助：如何通过编辑/保存按钮的onclick事件实现卡片翻转

没问题，我来帮你捋清楚怎么把翻转功能绑定到按钮上！你原来的思路是对的，只需要调整触发逻辑，让按钮能定位到对应的卡片并切换类名就行，具体可以按下面的步骤来：

1. 调整HTML结构（确保按钮和卡片关联） #

首先要让按钮和它对应的卡片有明确的关联，最简单的方式是把按钮放在卡片内部（不管正面还是背面），这样可以通过按钮找到父级的卡片容器：

<div class="flip-card">
  <!-- 卡片正面 -->
  <div class="flip-card-front">
    <h3>正面内容</h3>
    <button onclick="flipCard(this)">编辑</button>
  </div>
  <!-- 卡片背面 -->
  <div class="flip-card-back">
    <h3>编辑界面</h3>
    <button onclick="flipCard(this)">保存</button>
  </div>
</div>

这里给按钮的onclick传了this（也就是按钮本身），这样函数里就能通过它找到对应的卡片。

2. 定义flipCard函数 #

接下来把你找到的jQuery逻辑改成按钮触发的版本，核心是通过按钮定位到对应的卡片，再切换flipped类：

function flipCard(button) {
  // 找到当前按钮所在的最近的.flip-card容器
  const $targetCard = $(button).closest('.flip-card');
  // 切换flipped类，实现翻转
  $targetCard.toggleClass('flipped');
}

如果不想用jQuery，也可以用原生JS实现同样的逻辑：

function flipCard(button) {
  const targetCard = button.closest('.flip-card');
  targetCard.classList.toggle('flipped');
}

3. 移除卡片本身的点击事件 #

记得把原来绑定在卡片上的点击事件删掉，避免和按钮的触发逻辑冲突：

// 删掉这段代码
// $('.flip-card').on('click', function(){
//   $(this).toggleClass('flipped')
// } )

为什么这样可行？ #

closest()方法会从当前元素开始，向上查找最近的匹配选择器的父元素，不管按钮在卡片的正面还是背面，都能精准定位到对应的卡片容器，然后通过toggleClass()（或原生的classList.toggle()）来添加/移除flipped类，和你原来点击卡片的翻转逻辑完全一致，只是触发源从卡片本身变成了按钮。

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