为何我用jQuery实现的深浅色模式代码看似异常却能正常运行？

我尝试使用jQuery实现深色/浅色模式切换功能，编写了如下代码。但存在一个疑问：当移除darkmode类时，按逻辑应该添加whitemode类，然而实际操作中仅添加了class属性却无对应类名，可代码却能完美运行，这是为什么？

index.php #

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="darkmode.css">
    <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>

    <script src="https://kit.fontawesome.com/aa7be85309.js" crossorigin="anonymous"></script>


    <title>Dark Mode</title>
</head>
<body class='whitemode'>

<div class="darkmode"></div>


<div class="container">
    <div class="content">
        <h1>Light / Dark mode</h1>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui non numquam excepturi corrupti vel dicta commodi veritatis eaque eius harum blanditiis voluptatem dolores itaque iure ex, molestias expedita rem velit?
    </div>

    <div class="toggle-btn" id='toggle-btn'><i class="fa-regular fa-moon"></i></div>


    <script src="main.js"></script>
</div>
    
</body>
</html>

darkmode.css #

body{
    transition-duration: .3s;
}
.container{
    width: 500px;
    margin: auto;
    font-family: sans-serif;
}

.toggle-btn{
    padding: 3px 5px;
    border: 1px solid red;
    border-radius: 3px;
}

#toggle-btn{
    position: fixed;
    top: 40px;
    right: 40px;
    cursor: pointer;
}

body.whitemode{
    background-color: #fff;
    color: black;
    transition-duration: .3s;
}

body.darkmode{
    background-color: black;
    color: #ffffff;
    transition-duration: .3s;
}

.border{
    border-color: #fff;
}

main.js #

$(document).ready(function(){
    $("#toggle-btn").click(function(){

        if($("body").hasClass('whitemode') ? ($("body").toggleClass('whitemode'), $("body").toggleClass("darkmode"), $("#toggle-btn").toggleClass("border")) : ($("body").toggleClass("darkmode"), $("#toggle-btn").toggleClass("border")));
    });
});

问题原因分析 #

1. 代码逻辑漏洞：
   你的三元表达式逻辑存在缺失：

   • 第一次点击时，body带有whitemode类，进入true分支：移除whitemode、添加darkmode，同时切换按钮的border类，此时body的class为darkmode，状态正常。
   • 第二次点击时，body无whitemode类，进入false分支：仅执行移除darkmode类和切换按钮border类的操作，完全没有添加whitemode类的步骤，所以body的class属性变成空值（仅保留class=""的空属性）。

2. 视觉效果正常的本质：
   你定义的body.whitemode样式（白色背景、黑色文字），和浏览器默认的body样式完全一致。当body没有任何类时，浏览器默认样式自动生效，视觉上和添加whitemode类的效果没有区别，所以功能看起来“完美运行”。

优化建议 #

完全不需要复杂的三元判断，直接用toggleClass同时处理两个类即可，逻辑更简洁且无漏洞：

$(document).ready(function(){
    $("#toggle-btn").click(function(){
        $("body").toggleClass('whitemode darkmode');
        $("#toggle-btn").toggleClass("border");
    });
});

这样每次点击都会切换whitemode和darkmode的存在状态，确保body始终有且只有其中一个类，不会出现空class的情况。

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