使用Javascript实现多面flip card点击切换效果问题求助

问题原因 #

• 初始HTML中不存在带.john类的元素，const johnCard = document.querySelector('.john')获取结果为null，后续给johnCard赋值innerHTML的操作完全无效
• 给同一个卡片绑定了两次点击事件（addEventListener和onclick），逻辑互相冲突，没有和你要的「灰色背景→Jane→灰色→John」循环逻辑对齐
• 仅用count % 2判断无法实现4步循环的需求，也没有动态修改卡片背面内容的逻辑，即使切换了类也不会有视图变化
• 直接修改.jane的innerHTML会覆盖原始DOM结构，和翻转CSS逻辑不匹配

修正方案 #

调整HTML结构 #

保证卡片初始包含正面、背面两个节点，和翻转CSS逻辑匹配：

<section class="card-area">
<div class="card">
  <div class="inner-card" id="clicks">
    <div class="front"></div>
    <div class="back"></div>
  </div>
</div>
</section>

替换JS逻辑 #

不需要单独定义janeCard和johnCard变量，预存人物模板，根据点击次数切换内容即可：

// 预存两个人物的信息模板
const userTemplates = {
  jane: `
    <div class="back-info">
      <h2>Jane Doe</h2>
      <p><strong>Title:</strong> Web Developer</p>
      <p><strong>Email:</strong> example@example.com</p>
      <p><strong>Phone:</strong> (999) 999 - 9999</p>
    </div>`,
  john: `
    <div class="back-info">
      <h2>John Doe</h2>
      <p><strong>Title:</strong> iOS Developer</p>
      <p><strong>Email:</strong> example@example.com</p>
      <p><strong>Phone:</strong> (999) 999 - 9999</p>
    </div>`
}

const flipCard = document.querySelector('.inner-card');
const backEl = flipCard.querySelector('.back');
// 初始化默认显示Jane的信息
backEl.innerHTML = userTemplates.jane;
let count = 0;
let currentShowUser = 'jane';

flipCard.addEventListener('click', function() {
  count += 1;
  // 切换翻转状态
  flipCard.classList.toggle('is-flipped');
  
  if (count % 2 === 0) {
    // 偶数次点击回到灰色正面时，切换下一次要展示的人物
    currentShowUser = currentShowUser === 'jane' ? 'john' : 'jane';
    backEl.innerHTML = userTemplates[currentShowUser];
  }
})

逻辑说明 #

点击次数从1开始计数：

1. 第1次点击：添加is-flipped翻到背面，显示Jane信息
2. 第2次点击：移除is-flipped回到灰色正面，同步把背面内容替换为John的信息
3. 第3次点击：添加is-flipped翻到背面，显示John信息
4. 第4次点击：移除is-flipped回到灰色正面，同步把背面内容替换为Jane的信息
5. 后续循环往复，完全匹配你需要的切换顺序

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