如何实现点击按钮变橙色，点击其他按钮时恢复前一个按钮原始颜色

你的现有代码存在几个关键问题：

• 未定义button变量，无法遍历目标按钮元素
• 没有记录之前被选中的按钮，无法实现“恢复原始颜色”的逻辑
• 未保存按钮的初始样式，恢复时没有参照值

以下是修正后的代码，完全实现你需要的功能：

// 获取目标按钮集合（请根据实际DOM结构修改选择器，比如按钮统一类名"toggle-btn"）
const toggleBtns = document.querySelectorAll('.toggle-btn');
const subBtn = document.getElementById('submit');

// 记录当前激活的按钮，保存每个按钮的原始样式
let activeBtn = null;
const originalStyles = new Map();

// 初始化：保存每个按钮的初始背景色和文字颜色
toggleBtns.forEach(btn => {
  originalStyles.set(btn, {
    bgColor: btn.style.backgroundColor || getComputedStyle(btn).backgroundColor,
    textColor: btn.style.color || getComputedStyle(btn).color
  });
});

// 给每个切换按钮绑定点击事件
toggleBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    // 先恢复之前激活按钮的原始样式
    if (activeBtn && activeBtn !== btn) {
      const styles = originalStyles.get(activeBtn);
      activeBtn.style.backgroundColor = styles.bgColor;
      activeBtn.style.color = styles.textColor;
    }
    // 设置当前按钮为橙色样式
    btn.style.backgroundColor = '#FC7614';
    btn.style.color = 'white';
    // 更新激活按钮记录
    activeBtn = btn;
  });
});

// 提交按钮点击事件：恢复之前被激活的按钮样式
subBtn.addEventListener('click', () => {
  if (activeBtn) {
    const styles = originalStyles.get(activeBtn);
    activeBtn.style.backgroundColor = styles.bgColor;
    activeBtn.style.color = styles.textColor;
    activeBtn = null;
  }
  // 保留你原本给提交按钮设置的样式（可按需调整）
  subBtn.style.backgroundColor = 'white';
  subBtn.style.color = '#FC7614';
});

核心逻辑说明 #

• 用Map存储每个按钮的初始样式，确保恢复时能精准还原原本状态，兼容CSS类设置的样式
• 通过activeBtn变量跟踪当前选中的按钮，点击新按钮或提交按钮时，都能快速定位需要恢复的目标

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