Question

我用自己的深色主题制作了一个深色模式按钮。主题由本地存储保存。同样，当我单击按钮时，它的图标也不会改变（月亮变成太阳）。但是，如果我重新加载页面，则该站点仍处于暗模式，但按钮图标未更改。因此，这里有一个链接，向您显示如果您不理解我在说什么的问题。 codepen demo也是我的代码：

$(document).ready(function () {

$('body').toggleClass(localStorage.toggled);

$(".darkmode-btn").on("click", function(){

  if (localStorage.toggled != 'dark') {

    $('body').toggleClass('dark', true);
    localStorage.toggled = "dark";

    
     
  } else {

    $('body').toggleClass('dark', false);
    localStorage.toggled = "";
    $(this).toggleClass("sun")


  }


});
});

.dark{background-color: #222;}

.darkmode-btn {
    height: 60px;
    line-height: 60px;
    color: #fff;
    text-align: center;
    font-size: 20px;
    margin-left: 20px;
    z-index: 100;
    cursor: pointer;
  background-color: #08f;
}

.darkmode-btn:before,.darkmode-btn.moon:before,.darkmode-btn.sun:before {
  font-family: "fontawesome";

}
.darkmode-btn:before {
  content: '\f186';
}
.darkmode-btn.moon:before {
    content: '\f186';
}
.darkmode-btn.sun:before {
    content: '\f185';
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div class="darkmode-btn">
</div>
  </body>

Answer 1

 $(".darkmode-btn").on("click", function(){
  if (localStorage.toggled != 'dark') {
    $('body').toggleClass('dark', true);
    localStorage.toggled = "dark";
    $(this).addClass("moon").removeClass("sun")
  } else {
    $('body').toggleClass('dark', false);
    localStorage.toggled = "";
    //$(this).toggleClass("sun").removeClass("sun")
    $(this).addClass("sun").removeClass("moon")
  }
});
});

这应该对您有帮助。

暗模式图标未更改且未保存在本地存储中

1 个答案: