如何用Vanilla JavaScript的toggle()方法精简3个IF循环？

你原来的代码用三个独立函数+判断src的方式，其实可以通过统一维护状态或者CSS类切换来大幅精简，逻辑更集中，还能避免src.match可能出现的路径问题（比如浏览器把相对路径转成绝对URL后匹配异常）。

方法一：用状态变量统一管理（最直接） #

定义一个布尔变量记录灯泡状态，点击时一次性切换所有效果，不用多次判断src：

<h1 class="title-text" id="title-text">Click the lightbulb to turn it on or off!</h1>
<img id="lightbulb" onclick="toggleAll()" src="/personal-projects/pic_bulbon1.gif">
<script>
    const lightbulb = document.getElementById("lightbulb");
    const titleText = document.getElementById("title-text");
    let isBulbOn = true; // 初始状态为开

    function toggleAll() {
        // 切换灯泡图片
        lightbulb.src = isBulbOn 
            ? "/personal-projects/pic_bulboff1.gif" 
            : "/personal-projects/pic_bulbon1.gif";
        
        // 切换背景色和标题颜色
        document.body.style.background = isBulbOn ? "black" : "#FEDD00";
        titleText.style.color = isBulbOn ? "white" : "black";
        
        // 反转状态
        isBulbOn = !isBulbOn;
    }
</script>

方法二：CSS类切换（更推荐，样式与逻辑分离） #

把样式写在CSS里，通过给<body>添加/移除类来控制背景和标题颜色，逻辑只负责切换类和灯泡图片：

<style>
    body {
        transition: background 0.3s; /* 可选：添加过渡动画让切换更平滑 */
    }
    .light-on {
        background: #FEDD00;
    }
    .light-on .title-text {
        color: black;
    }
    .light-off {
        background: black;
    }
    .light-off .title-text {
        color: white;
    }
</style>

<h1 class="title-text" id="title-text">Click the lightbulb to turn it on or off!</h1>
<img id="lightbulb" onclick="toggleAll()" src="/personal-projects/pic_bulbon1.gif">
<script>
    const lightbulb = document.getElementById("lightbulb");
    const body = document.body;
    let isBulbOn = true;

    function toggleAll() {
        // 切换灯泡图片
        lightbulb.src = isBulbOn 
            ? "/personal-projects/pic_bulboff1.gif" 
            : "/personal-projects/pic_bulbon1.gif";
        
        // 切换body的类，原生classList.toggle直接实现类的添加/移除
        body.classList.toggle("light-on");
        body.classList.toggle("light-off");
        
        // 反转状态
        isBulbOn = !isBulbOn;
    }
</script>

额外优化：不用状态变量也能实现 #

如果不想维护状态变量，也可以直接通过DOM类的存在来判断当前状态，避免状态与实际DOM不一致的问题：

function toggleAll() {
    const isOff = body.classList.contains("light-off");
    lightbulb.src = isOff 
        ? "/personal-projects/pic_bulbon1.gif" 
        : "/personal-projects/pic_bulboff1.gif";
    
    body.classList.toggle("light-on");
    body.classList.toggle("light-off");
}

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