如何实现点击切换按钮时转移子元素的addClass类？

核心思路：点击任意按钮时，先全局清除所有按钮子元素的addClass类，再给当前点击按钮的子元素添加该类，替代原有的toggle切换逻辑。

实现代码如下：

// 获取所有目标按钮元素
const sectionIcons = document.querySelectorAll('.nk-section-icons');

sectionIcons.forEach(icon => {
  icon.addEventListener('click', function() {
    // 清除所有按钮子元素的addClass类
    sectionIcons.forEach(item => {
      const child = item.querySelector(':scope > *'); // 仅操作当前按钮的直接子元素
      if (child) child.classList.remove('addClass');
    });
    // 给当前点击按钮的子元素添加addClass类
    const currentChild = this.querySelector(':scope > *');
    if (currentChild) currentChild.classList.add('addClass');
  });
});

关键细节说明 #

• 用:scope > *精准定位按钮的直接子元素，避免误操作深层嵌套元素
• 先全局清除再单独添加，确保同一时刻只有一个子元素拥有addClass类
• 移除原toggle逻辑，改为单向添加逻辑，完全匹配「点击新按钮自动转移类」的需求

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