原生JS实现灯泡切换：如何用单个if语句优化按钮文本切换逻辑

我正在制作一个灯泡开关效果：点击按钮触发函数，切换灯泡元素的类名来改变颜色，同时让按钮文本随类名切换而变化。目前功能已经实现，但代码用了两个条件判断，我希望仅用单个if语句完成——通过检测灯泡是否激活lightOn类来修改按钮文本，未激活则设置为原有文本（"ON"）。另外想了解有没有更简便的原生JS实现方式，不需要用jQuery。

当前代码如下：

JavaScript #

let bulb = document.getElementById("light");
let lightSwitch = document.getElementById("switch");

function activity(event) {
  bulb.classList.toggle("lightOn");

  if (bulb.classList.contains("lightOn")) {
    lightSwitch.textContent = "OFF";
  } else if (bulb.classList.contains("lightOff")) {
    lightSwitch.textContent = "ON";
  }
}

CSS #

.lightOn {
  background: yellow;
}

HTML #

<div id="light" class="lightOff"></div>
<button id="switch" onclick="activity()">ON</button>

解决方案 #

1. 简化为单个条件判断 #

不需要额外判断lightOff类，因为classList.toggle("lightOn")只会在「存在lightOn」和「不存在lightOn」两种状态间切换，初始状态是lightOff，所以只需要检查lightOn的存在性即可：

let bulb = document.getElementById("light");
let lightSwitch = document.getElementById("switch");

function activity(event) {
  bulb.classList.toggle("lightOn");

  // 单个条件检测逻辑
  if (bulb.classList.contains("lightOn")) {
    lightSwitch.textContent = "OFF";
  } else {
    lightSwitch.textContent = "ON";
  }
}

如果想进一步精简，还可以用三元表达式一行完成文本切换：

lightSwitch.textContent = bulb.classList.contains("lightOn") ? "OFF" : "ON";

2. 更简洁的原生JS实现 #

推荐用事件监听替代内联onclick，同时利用classList.toggle()的返回值（布尔值，代表是否成功添加了类）直接设置按钮文本，代码更简洁易维护：

// 用querySelector获取元素，语法更灵活
const bulb = document.querySelector("#light");
const lightSwitch = document.querySelector("#switch");

// 添加点击事件监听
lightSwitch.addEventListener("click", () => {
  // toggle返回true表示添加了lightOn类，false表示移除了
  const isLightOn = bulb.classList.toggle("lightOn");
  // 根据状态设置按钮文本
  lightSwitch.textContent = isLightOn ? "OFF" : "ON";
});

对应的HTML可以去掉内联事件：

<div id="light" class="lightOff"></div>
<button id="switch">ON</button>

这种写法避免了全局函数，代码结构更清晰，也符合现代前端的最佳实践。

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