如何在jquery中添加类和删除类？

我正在尝试制作一个按钮，将我的页面切换到暗模式，我遇到了一个问题，当我将页面切换到暗模式，然后再将其切换到亮模式时，它第一次才工作，但我尝试再次将其切换到暗模式，它什么也没做

这是我的

darkmode.js

：

const active = "light";

$("#btn-darkmode").click(function () {
  this.active = "dark";
  if (this.active === "dark") {
    $(".container-fluid").addClass("dark-mode");
    console.log("dark");
  }
  $(this).click(function () {
    this.active = "light";
    if (this.active === "light")
      $(".container-fluid").removeClass("dark-mode");
    console.log("light");
  });
});

这是我的

index.html

：

<span>Light</span>
<label class="switch">
  <input type="checkbox" id="btn-darkmode">
  <span class="slider round"></span>
</label>
<span>Dark</span>

---

我不确定你的代码出了什么问题，但我用了toggleClass，它正在工作

$（'btn darkmode'）。在（'click'，function（）上{
$（'.container fluid'）.toggleClass（'dark-mode'）；
});
。暗模式{
背景色：黑色；
颜色：白色；
}

轻的
黑暗的
实现同样的目标有一些较短的方法，但我修改了您的代码以使其正常工作

    let active = "light"; /* changing const to let, const means constant so doesn't have to change it's value once its already set */

    $("#btn-darkmode").click(function () {
      //this.active = "dark"; removed this line, and we'll use the one defined outside this function call
      if (active === "light") { /* change dark  to -> light makes more sense */
        $(".container-fluid").addClass("dark-mode");
        active = "dark"; /* add this line to set the new value of the current state */
        console.log("dark");
      }else if(active === "dark"){ /* you could use only 'else' instead, because there are only two states */
        $(".container-fluid").removeClass("dark-mode");
         active = "light";
         console.log("light");
      }
      //remove this block because it's a nested event handler function, and it's creating conflicts.
      /*$(this).click(function () { 
        this.active = "light";
        if (this.active === "light")
          $(".container-fluid").removeClass("dark-mode");
        console.log("light");
      }); */ 

    });

使用多个单击侦听器…尤其是嵌套在单击事件处理程序中是一个非常糟糕的主意。hndler函数中的
this
也是元素，因此
this.acive
与
const active
完全无关
    let active = "light"; /* changing const to let, const means constant so doesn't have to change it's value once its already set */

    $("#btn-darkmode").click(function () {
      //this.active = "dark"; removed this line, and we'll use the one defined outside this function call
      if (active === "light") { /* change dark  to -> light makes more sense */
        $(".container-fluid").addClass("dark-mode");
        active = "dark"; /* add this line to set the new value of the current state */
        console.log("dark");
      }else if(active === "dark"){ /* you could use only 'else' instead, because there are only two states */
        $(".container-fluid").removeClass("dark-mode");
         active = "light";
         console.log("light");
      }
      //remove this block because it's a nested event handler function, and it's creating conflicts.
      /*$(this).click(function () { 
        this.active = "light";
        if (this.active === "light")
          $(".container-fluid").removeClass("dark-mode");
        console.log("light");
      }); */ 

    });