单击按钮更改类，但之后不能再次更改类。

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类已经出现了，只是单击仍然注册上一个黑模式类吗？我以前从未遇到过这样的问题，我不知道这是什么类型的错误，所以我无法找到正确的答案。

​

编辑:根据acdc钟的评论，我现在有

// 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 go中更改所有内容，但随后，我需要先单击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")，因此永远不会安装第二个侦听器。

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

$(() => {
    // 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");。