调整卡片翻转触发方式：从点击卡片改为点击按钮

要实现仅点击卡片内的按钮才触发翻转效果，只需修改JavaScript部分的事件绑定逻辑，具体实现如下：

修改后的JavaScript代码 #

// 选中所有卡片内的翻转按钮
const flipButtons = document.querySelectorAll('.card button');

flipButtons.forEach(button => {
  button.addEventListener('click', function() {
    // 找到当前按钮所属的卡片容器
    const targetCard = this.closest('.card');
    // 切换卡片的翻转类
    targetCard.classList.toggle('is-flipped');
  });
});

逻辑说明 #

1. 移除原代码中给整个.card元素绑定的点击事件，改为仅给每个卡片内的按钮绑定点击监听
2. 点击按钮时，通过closest('.card')方法精准定位到按钮所在的父级卡片容器，确保只翻转当前按钮对应的卡片
3. 保留原有的is-flipped类切换逻辑，保证翻转动画效果不受影响

完整代码示例 #

<div class="flip-box">
  <div class="card">
    <div class="flip-box-front"> 
      <h2>Front Side</h2> 
      <p> some text </p>
      <p> some text </p>
      <button> click to flip </button>
    </div> 

    <div class="flip-box-back"> 
      <h2>Back Side</h2>
      <p> some text </p> 
      <p> some text </p> 
      <button> click to flip </button>
    </div>
  </div> 

  <br/>
  <div class="card">
    <div class="flip-box-front"> 
      <h2>Front Side</h2> 
      <p> some text </p>
      <p> some text </p>
      <button> click to flip </button>
    </div> 

    <div class="flip-box-back"> 
      <h2>Back Side</h2>
      <p> some text </p> 
      <p> some text </p> 
      <button> click to flip </button>
    </div>
  </div>
</div> 

.flip-box {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
}

.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;
}

.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);
}

const flipButtons = document.querySelectorAll('.card button');

flipButtons.forEach(button => {
  button.addEventListener('click', function() {
    const targetCard = this.closest('.card');
    targetCard.classList.toggle('is-flipped');
  });
});

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