实现单激活按钮：切换曲目时重置前序按钮至初始状态

我当前有3个带有按钮的区块，点击按钮时会切换显示播放/暂停图标。现需实现功能：当激活新的曲目按钮时，之前处于激活状态的按钮自动恢复至初始状态（显示播放图标）。

完整代码实现 #

HTML 代码 #

<div class="cards">
  <div class="card flex">
    <h4 class="card__title">Track 01</h4>
    <div class="btn-wrapper">
      <img src="https://cdn-icons-png.flaticon.com/512/153/153752.png" alt="播放图标" class="play__btn btn">
      <img src="https://cdn-icons-png.flaticon.com/512/1214/1214679.png" alt="暂停图标" class="pause__btn btn">
    </div>
  </div>
  <div class="card flex">
    <h4 class="card__title">Track 02</h4>
    <div class="btn-wrapper">
      <img src="https://cdn-icons-png.flaticon.com/512/153/153752.png" alt="播放图标" class="play__btn btn">
      <img src="https://cdn-icons-png.flaticon.com/512/1214/1214679.png" alt="暂停图标" class="pause__btn btn">
    </div>
  </div>
  <div class="card flex">
    <h4 class="card__title">Track 03</h4>
    <div class="btn-wrapper">
      <img src="https://cdn-icons-png.flaticon.com/512/153/153752.png" alt="播放图标" class="play__btn btn">
      <img src="https://cdn-icons-png.flaticon.com/512/1214/1214679.png" alt="暂停图标" class="pause__btn btn">
    </div>
  </div>
</div>

CSS 代码 #

.flex {
  display: flex;
  align-items: center;
}

.card__title {
  margin-right: 20px;
}

.btn {
  width: 17px;
  height: 17px;
  cursor: pointer;
}

.play__btn-hidden {
  display: none;
}

.pause__btn {
  display: none;
}

.pause__btn-active {
  display: block;
}

修改后的 JavaScript 代码 #

let btnWrappers = document.querySelectorAll('.btn-wrapper');
let activeBtn = null; // 记录当前激活的按钮容器

btnWrappers.forEach(function(wrapper) {
  wrapper.addEventListener('click', function() {
    // 如果点击的是已激活的按钮，仅切换状态
    if (activeBtn === wrapper) {
      toggleButtonState(wrapper);
      // 切换回初始状态时清空激活记录
      if (!wrapper.querySelector('.pause__btn').classList.contains('pause__btn-active')) {
        activeBtn = null;
      }
      return;
    }

    // 重置之前激活的按钮到初始状态
    if (activeBtn) {
      resetButtonState(activeBtn);
    }

    // 切换当前按钮状态并标记为激活
    toggleButtonState(wrapper);
    activeBtn = wrapper;
  })
})

// 封装按钮状态切换逻辑
function toggleButtonState(wrapper) {
  wrapper.querySelector('.play__btn').classList.toggle('play__btn-hidden');
  wrapper.querySelector('.pause__btn').classList.toggle('pause__btn-active');
}

// 封装按钮重置逻辑
function resetButtonState(wrapper) {
  wrapper.querySelector('.play__btn').classList.remove('play__btn-hidden');
  wrapper.querySelector('.pause__btn').classList.remove('pause__btn-active');
}

代码说明 #

• 用activeBtn变量记录当前激活的按钮容器，避免每次遍历所有按钮，提升执行效率
• 拆分状态切换和重置逻辑为独立函数，让代码结构更清晰，后续维护更方便
• 支持点击已激活按钮切换回初始状态的场景，同时清空激活记录
• 点击新按钮时，优先重置旧激活按钮的状态，再切换当前按钮的显示状态

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