实现Pause/Play按钮active类互斥切换的代码问题求助

嗨，我来帮你分析下这个问题～你现在的代码逻辑是只针对当前点击的按钮切换active类，但没有处理「移除其他按钮的active类」这一步，所以就会出现多个按钮同时带有高亮效果的情况啦。

要实现互斥切换的效果，我们需要在给当前按钮添加active类之前，先把所有按钮的active类都移除掉，这样就能保证永远只有一个按钮处于激活状态。

修改后的核心代码 #

JavaScript 代码

const btns = document.querySelectorAll(".switch-btn");

btns.forEach((btn) => {
  btn.addEventListener("click", function(event) {
    // 第一步：移除所有按钮的active类
    btns.forEach(button => button.classList.remove("active"));
    // 第二步：给当前点击的按钮添加active类
    event.currentTarget.classList.add("active");
  })
})

逻辑说明

• 每次点击任意按钮时，先遍历所有.switch-btn元素，把它们的active类统一移除
• 再给当前被点击的按钮单独添加active类，这样就实现了「点击哪个，哪个高亮，之前的高亮自动取消」的互斥效果

可选扩展：支持取消所有高亮 #

如果你的需求里允许「点击已激活按钮时，取消所有按钮的高亮状态」，可以调整成下面的逻辑：

const btns = document.querySelectorAll(".switch-btn");

btns.forEach((btn) => {
  btn.addEventListener("click", function(event) {
    const currentBtn = event.currentTarget;
    const isCurrentActive = currentBtn.classList.contains("active");
    
    // 先移除所有按钮的active类
    btns.forEach(button => button.classList.remove("active"));
    
    // 如果当前按钮原本未激活，就添加active类；否则不添加（即取消所有高亮）
    if (!isCurrentActive) {
      currentBtn.classList.add("active");
    }
  })
})

你的HTML代码不需要做任何修改，保持原样即可：

<div class="btns">
  <button class="switch-btn" data-control="pause">Pause</button>
  <button class="switch-btn" data-control="play"> Play</button>
</div>

备注：内容来源于stack exchange，提问作者User One