时间戳

首页 > 解决方案 > toggleClass - localStorage 在第一次加载页面时从某些元素中删除所有类。如何解决？

javascript - toggleClass - localStorage 在第一次加载页面时从某些元素中删除所有类。如何解决？

问题描述

我在我的网站上添加了一些 jquery 代码，当用户单击“暗模式”链接时，页面元素会改变颜色并存储在本地存储中。我在 Stackoverflow HTML5 local storage save .toggleClass上找到了一段代码，它工作正常，但是当用户由于某种原因第一次访问该网站时，我的代码所针对的元素会丢失所有原始样式。我检查了它，所有的课程都被删除了。当我点击“黑暗模式”按钮并刷新页面时，所有课程都回来了，网站运行良好。谁能告诉我如何解决它？我不知道为什么会这样。

css

.nightmode {
    background: black;
}

.headerNightmode {
    background: #6456A3;
}

jQuery


jQuery(document).ready(function($){
    /* Write your Public custom_public jQuery here! */
    var button = $('.menu-item-178 a');
     var container = $('#body.page-template-default').toggleClass(window.localStorage.toggled);
     var containerProfile = $('#body.page-template.page-template-page-tpl-profile').toggleClass(window.localStorage.toggled);
     var containerBlog = $('#body.blog').toggleClass(window.localStorage.toggled);
     var containerHeader = $('.header').toggleClass(window.localStorage.toggledHeader);

    //button click
  button.click(function() {


      if (window.localStorage.toggled != "nightmode" && window.localStorage.toggledHeader != "headerNightmode" ) {
      container.toggleClass("nightmode", true );
      containerProfile.toggleClass("nightmode", true );
      containerBlog.toggleClass("nightmode", true );
          containerHeader.toggleClass("headerNightmode", true );
        window.localStorage.toggledHeader = "headerNightmode";
      window.localStorage.toggled = "nightmode";
   } else {
      container.toggleClass("nightmode", false );
        containerProfile.toggleClass("nightmode", false );
        containerBlog.toggleClass("nightmode", false );
       containerHeader.toggleClass("headerNightmode", false );
        window.localStorage.toggledHeader = "";
      window.localStorage.toggled = "";
   }



  });

});

标签： javascriptjquerycsslocal-storage

解决方案

推荐阅读