点击SVG播放按钮仅被点击项单独变色的修复方案求助

• 现有代码使用全局统一状态/类控制所有播放按钮样式，未单独定位当前触发点击事件的元素
• Home按钮返回逻辑中未清除按钮激活状态，导致样式残留

1. 调整播放按钮点击事件逻辑 #

点击时仅给当前被触发的按钮添加激活状态类，不要批量修改所有按钮的样式：

// 原逻辑大概率是批量给所有按钮加状态，修改为如下写法
document.querySelectorAll('.play-btn').forEach(btn => {
  btn.addEventListener('click', (e) => {
    // 若需要互斥效果（仅一个按钮处于激活态），保留下面这行，不需要可删除
    document.querySelectorAll('.play-btn').forEach(item => item.classList.remove('active'))
    // 仅给当前点击的按钮加激活类
    e.currentTarget.classList.add('active')
  })
})

2. 补充Home按钮的状态重置逻辑 #

在Home按钮的点击回调中新增清除所有播放按钮激活状态的逻辑，避免返回后样式异常：

document.querySelector('.home-btn').addEventListener('click', () => {
  // 原有返回逻辑保持不变，新增以下状态清除代码
  document.querySelectorAll('.play-btn').forEach(item => item.classList.remove('active'))
})

3. 调整CSS样式绑定规则 #

确保激活样式绑定在单个按钮的专属类上，不要通过父容器全局类控制所有按钮：

/* 原代码可能是通过父容器全局类控制所有按钮，修改为如下写法 */
.play-btn.active {
  /* 若SVG颜色用stroke控制，把fill改为stroke即可 */
  fill: #你需要的颜色值;
  transition: all 0.2s ease;
}

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