按钮点击更改班级，但之后无法再次更改班级

Question

我正在尝试设置一个用于在暗/亮模式之间切换的按钮。我的目标是设置按钮，以便在我单击“暗模式”按钮后，它会变为“亮模式”按钮。在我点击“浅色模式”按钮后，它会切换回深色模式，反之亦然。

现在，我所拥有的是，一旦我单击“暗模式”按钮，它确实会更改为“亮模式”，但我无法再将其更改回暗模式。我参考了https://www.w3schools.com/jquery/html_toggleclass.asp 和Function not calling within an onclick event 尝试使用toggleClass 来解决这个问题，但它仍然给了我同样的错误。

这里是 javascript 代码部分。

$(() => {
// on click, set dark mode
$(".darkmode").on("click", () => {
    $('body')[0].className = "darkmode";
    $('p')[0].className = "darkmode";
    $('h2')[0].className = "darkmode";
    // change the screen colours displaying the dice value etc
    $('.badge-light').addClass('badge-dark').removeClass('badge-light');
    // switch to light mode button
    $('.btn-dark').addClass('btn-light lightmode').removeClass('btn-dark darkmode').text("Light mode");

  })
  
  
// on click, set light mode
$(".lightmode").on("click", () => {
    $('body')[0].className = "";
    $('p')[0].className = "";
    $('h2')[0].className = "";
    $('.badge-dark').addClass('badge-light').removeClass('badge-dark')
    $('.btn-light').addClass('btn-dark darkmode').removeClass('btn-light lightmode').text("Dark mode");
  })
})

影响下面的html

<button class="btn btn-dark darkmode mr-1">Dark mode</button>

我怀疑这个错误与网站没有读取 lightmode 功能有关？毕竟，当我查看控制台时，我看到类已经成功更新，所以 lightmode 类已经存在，只是点击仍然注册了之前的 darkmode 类？我以前没有遇到过这样的问题，我不确定这是什么类型的错误，所以我无法正确搜索。

编辑：根据 acdcjunior 的评论，我现在有了

// on click, set dark mode
  $(document).on("click", ".darkmode", () => {
      $('body,p,h2').toggleClass("darkmode");
      // change the screen colours displaying the dice value etc
      $('.badge-light').addClass('badge-dark').removeClass('badge-light');
      // switch to light mode button
      $('.btn-dark').addClass('btn-light lightmode').removeClass('btn-dark darkmode').text("Light mode");
      
    })
    // on click, set light mode
    $(document).on("click", ".lightmode", () => {
        $('.badge-dark').addClass('badge-light').removeClass('badge-dark')
        $('body,p,h2').toggleClass("lightmode");
        $('.btn-light').addClass('btn-dark darkmode').removeClass('btn-light lightmode').text("Dark mode");
      })

这很棒，因为它可以切换暗/亮模式，但只需单击 2 次。让我感到困惑的是，当我加载页面并首先单击“暗模式”时，它会在 1 次中更改所有内容，但随后，我需要单击 2 次“亮模式”/“暗模式”来首先更改背景，然后亮/暗模式按钮和徽章在一起。

另外，我应该补充一点，当我使用没有像这样的切换类的原始版本时，

// on click, set dark mode
  $(document).on("click", ".darkmode", () => {
      $('body')[0].className = "darkmode";
      $('p')[0].className = "darkmode";
      $('h2')[0].className = "darkmode";
      // change the screen colours displaying the dice value etc
      $('.badge-light').addClass('badge-dark').removeClass('badge-light');
      // switch to light mode button
      $('.btn-dark').addClass('btn-light lightmode').removeClass('btn-dark darkmode').text("Light mode");
      
    })
    // on click, set light mode
    $(document).on("click", ".lightmode", () => {
        $('body')[0].className = "";
        $('p')[0].className = "";
        $('h2')[0].className = "";
        $('.badge-dark').addClass('badge-light').removeClass('badge-dark')
        $('.btn-light').addClass('btn-dark darkmode').removeClass('btn-light lightmode').text("Dark mode");
      })

问题又回到了原来的问题，我只能单击一次暗模式，随后，对按钮的任何单击都不会呈现任何内容。不过我觉得这很奇怪，因为控制台确实显示事件已更新。

Answer 1

当您第一次绑定事件时，屏幕上没有 $(".lightmode")，因此永远不会安装第二个监听器。

将监听器绑定到文档并在$(document) 中使用on。这将从一开始就将侦听器安装到文档并处理对类的任何更改：

$(() => {
    // on click, set dark mode
    $(document).on("click", ".darkmode", () => {
      
      
    // on click, set light mode
    $(document).on("click", ".lightmode",() => {

---

顺便说一句，在body、p 和h2 上设置类的那三行可能只是$('body,p,h2').toggleClass("darkmode");