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

EN

$('#btn-darkmode').on('click', function(){
  $('.container-fluid').toggleClass('dark-mode');
});

.dark-mode {
  background-color: black;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid">
<span>Light</span>
<label class="switch">
  <input type="checkbox" id="btn-darkmode">
  <span class="slider round"></span>
</label>
<span>Dark</span>
</div>

    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");
      }); */ 

    });