通过按钮切换颜色：如何精简代码实现双向切换功能？

方案一：配置化统一函数（逻辑集中管理） #

把两种颜色的状态抽成配置对象，用单一函数处理所有切换逻辑，彻底消除重复代码：

HTML 代码

<h1 id="header">Red Or Green</h1>
<button id="redButton" onclick="toggleColor('red')">Red</button>
<button id="greenButton" onclick="toggleColor('green')">Green</button>

JavaScript 代码

// 预定义两种状态的配置数据
const colorStates = {
  red: {
    headerText: 'Red',
    headerColor: 'red',
    activeButton: { id: 'redButton', textColor: 'white', bgColor: 'red' },
    inactiveButton: { id: 'greenButton', textColor: 'black', bgColor: 'grey' }
  },
  green: {
    headerText: 'Green',
    headerColor: 'green',
    activeButton: { id: 'greenButton', textColor: 'white', bgColor: 'green' },
    inactiveButton: { id: 'redButton', textColor: 'black', bgColor: 'grey' }
  }
};

function toggleColor(target) {
  const state = colorStates[target];
  const header = document.getElementById('header');
  
  // 更新标题内容与颜色
  header.textContent = state.headerText;
  header.style.color = state.headerColor;
  
  // 处理激活按钮样式
  const activeBtn = document.getElementById(state.activeButton.id);
  activeBtn.style.color = state.activeButton.textColor;
  activeBtn.style.backgroundColor = state.activeButton.bgColor;
  
  // 处理未激活按钮样式
  const inactiveBtn = document.getElementById(state.inactiveButton.id);
  inactiveBtn.style.color = state.inactiveButton.textColor;
  inactiveBtn.style.backgroundColor = state.inactiveButton.bgColor;
}

方案二：CSS 类分离（样式与逻辑解耦） #

更推荐的工程化写法：用 CSS 类控制样式，JS 仅负责切换类，后续修改样式无需改动JS：

HTML + CSS 代码

<style>
/* 标题样式类 */
.header-red { color: red; }
.header-green { color: green; }

/* 按钮状态类 */
.btn-active-red { color: white; background-color: red; }
.btn-active-green { color: white; background-color: green; }
.btn-inactive { color: black; background-color: grey; }
</style>

<h1 id="header">Red Or Green</h1>
<button id="redButton" onclick="toggleColor('red')">Red</button>
<button id="greenButton" onclick="toggleColor('green')">Green</button>

JavaScript 代码

// 提前获取DOM元素，避免重复查询
const header = document.getElementById('header');
const redBtn = document.getElementById('redButton');
const greenBtn = document.getElementById('greenButton');

function toggleColor(target) {
  // 重置所有元素的类
  header.classList.remove('header-red', 'header-green');
  redBtn.classList.remove('btn-active-red', 'btn-inactive');
  greenBtn.classList.remove('btn-active-green', 'btn-inactive');
  
  // 根据目标颜色应用对应类
  if (target === 'red') {
    header.textContent = 'Red';
    header.classList.add('header-red');
    redBtn.classList.add('btn-active-red');
    greenBtn.classList.add('btn-inactive');
  } else {
    header.textContent = 'Green';
    header.classList.add('header-green');
    greenBtn.classList.add('btn-active-green');
    redBtn.classList.add('btn-inactive');
  }
}

精简思路说明 #

• 移除重复的red()和green()函数，用单一函数处理切换逻辑，减少冗余代码
• 方案一通过配置对象集中管理状态，后续新增颜色只需添加配置项即可
• 方案二将样式逻辑完全交给CSS，JS只负责类切换，符合前端开发的关注点分离原则

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