暗模式圖標未更改且未保存在本地存儲中

Question

我用我自己的黑暗主題制作了一個黑暗模式按鈕。 主題由本地存儲保存。 同樣，當我單擊按鈕時，它的圖標不會改變（月亮到太陽）。 但是如果我重新加載頁面，該站點仍處於黑暗模式，但按鈕圖標沒有改變。 所以這里有一個鏈接，如果你不明白我在說什么，它會向你展示問題。 codepen 演示還有我的代碼：

 $(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 個解決方案

解決方案1
0 2020-11-04 22:32:13

暗模式圖標未更改且未保存在本地存儲中

問題描述

1 個解決方案

解決方案1 0 2020-11-04 22:32:13

解決方案1
0 2020-11-04 22:32:13