为什么读取localStorage值需要刷新页面才能显示由jQuery切换的CSS更改？

如何解决为什么读取localStorage值需要刷新页面才能显示由jQuery切换的CSS更改？

我正在尝试使用localStorage的值来显示两个Twitter feed中的一个，一个用于亮模式主题，另一个用于暗模式。它可以工作，但是我必须刷新网页才能使用正确的CSS-twitter-dark-display-none或twitter-light-display-none-才能正常工作。

使用jQuery(document).ready(function ()无济于事。

小提琴：https://jsfiddle.net/zpsf5q3x/2/但由于JSFiddle限制显示第三方框架，因此未显示样本推文。而且，本地存储也可能在那里不起作用。

Fiddle调用了两个外部库： https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css和https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.js

HTML：

请注意第一段中的data-theme="dark"。

<div class="twitter-dark-display-none">
<a class="twitter-timeline" data-width="170" data-height="200" data-theme="dark"
 data-tweet-limit="1" data-chrome="transparent nofooter noborders" href="https://twitter.com/StackOverflow?ref_src=twsrc%5Etfw">Tweets</a>
</div>

<div class="twitter-light-display-none">
<a class="twitter-timeline" data-width="170" data-height="200" data-tweet-limit="1" data-chrome="transparent nofooter noborders" href="https://twitter.com/StackOverflow?ref_src=twsrc%5Etfw">Tweets</a>
</div>

jQuery：

使用localStorage在黑暗和正常模式之间切换整个站点的总体功能。

$('body').toggleClass(localStorage.toggled);
function darkLight() {
  if (localStorage.toggled != 'dark') {
    $('body').toggleClass('dark',true);
    localStorage.toggled = "dark";
  } else {
    $('body').toggleClass('dark',false);
    localStorage.toggled = "";
  }
}

我要用来切换CSS的内容：

  if (localStorage.toggled === 'dark') {
    
        $('.twitter-light-display-none').addClass("display-none");
        $('.twitter-dark-display-none').addClass("display-block");
    
      } else {
    
        $('.twitter-dark-display-none').addClass("display-none");
        $('.twitter-light-display-none').addClass("display-block");
    
    }

CSS：

.display-none {
    display: none !important;
}

.display-block {
    display: block !important;
}

编辑10/24/2020：

johannchopin's的答案有效，另外添加了$('body').toggleClass(localStorage.toggled); 就像上面的原始代码一样。

但是。 gitbrent暗模式JS和CSS库存在某种冲突，因此我切换到https://github.com/coliff/dark-mode-switch，这导致以更简单的方式切换暗模式并使用功能{ {1}}用于在Twitter小部件div之间切换：

johannchopin

然后使用样式表中最基本的暗模式规则：

<script>

(function() {
  var darkSwitch = document.getElementById("darkSwitch");
  if (darkSwitch) {
    initTheme();
    darkSwitch.addEventListener("change",function(event) {
      resetTheme();
    });
    function initTheme() {
      var darkThemeSelected =
        localStorage.getItem("darkSwitch") !== null &&
        localStorage.getItem("darkSwitch") === "dark";
      darkSwitch.checked = darkThemeSelected;
      darkThemeSelected
        ? document.body.setAttribute("data-theme","dark")
        : document.body.removeAttribute("data-theme");
    }
    function resetTheme() {
      if (darkSwitch.checked) {
        document.body.setAttribute("data-theme","dark");
        localStorage.setItem("darkSwitch","dark"); 
} else {
        document.body.removeAttribute("data-theme");
        localStorage.removeItem("darkSwitch");  
      }
  updatedarkSwitch();
    }
  }
})();

function updatedarkSwitch() {
  if (localStorage.darkSwitch === 'dark') {
    $('.twitter-light-display-none').addClass("display-none").removeClass('display-block');
    $('.twitter-dark-display-none').addClass("display-block").removeClass('display-none');
  } else {
    $('.twitter-dark-display-none').addClass("display-none").removeClass('display-block');
    $('.twitter-light-display-none').addClass("display-block").removeClass('display-none');
  }
}
updatedarkSwitch()
</script>

解决方法

您的代码中有多个问题。首先，您切换CSS，但仅在页面加载时切换，因为此代码仅运行一次（加载脚本时）：

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

只需将此脚本移至您在updateInterfaceTheme末尾调用的函数（例如：darkLight()）中即可。

另一个问题是您忘记清理前一类，这会导致样式冲突：

$('.twitter-light-display-none').addClass("display-none"); // class .display-block still exist
$('.twitter-dark-display-none').addClass("display-block"); // class .display-none still exist

所以请不要忘记清洁它们：

 if (localStorage.toggled === 'dark') {
    $('.twitter-light-display-none').addClass("display-none").removeClass('display-block');
    $('.twitter-dark-display-none').addClass("display-block").removeClass('display-none');
  } else {
    $('.twitter-dark-display-none').addClass("display-none").removeClass('display-block');
    $('.twitter-light-display-none').addClass("display-block").removeClass('display-none');
  }

这样就可以了：

function darkLight() {
  if (localStorage.toggled !== 'dark') {
    $('body').toggleClass('dark',true);
    localStorage.toggled = "dark";
  } else {
    $('body').toggleClass('dark',false);
    localStorage.toggled = "";
  }

  updateInterfaceTheme();
}

function updateInterfaceTheme() {
  if (localStorage.toggled === 'dark') {
    $('.twitter-light-display-none').addClass("display-none").removeClass('display-block');
    $('.twitter-dark-display-none').addClass("display-block").removeClass('display-none');
  } else {
    $('.twitter-dark-display-none').addClass("display-none").removeClass('display-block');
    $('.twitter-light-display-none').addClass("display-block").removeClass('display-none');
  }
}

updateInterfaceTheme()

.display-none {
  display: none !important;
}

.display-block {
  display: block !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label class="switch"><span class="switchtext">Dark</span>
  <input type="checkbox" data-style="ios" data-onstyle="outline-secondary" data-offstyle="outline-secondary" data-size="sm" data-toggle="toggle" onchange="darkLight()">
  <span class="slider"></span><span class="switchtext">Mode</span>
</label>

<div class="twitter-dark-display-none">Dark Mode
  <a class="twitter-timeline" data-width="170" data-height="200" data-theme="dark" data-tweet-limit="1" data-chrome="transparent nofooter noborders" href="https://twitter.com/StackOverflow?ref_src=twsrc%5Etfw">Tweets</a>
</div>

<div class="twitter-light-display-none">Light Mode
  <a class="twitter-timeline" data-width="170" data-height="200" data-tweet-limit="1" data-chrome="transparent nofooter noborders" href="https://twitter.com/StackOverflow?ref_src=twsrc%5Etfw">Tweets</a>
</div>

检出jsfiddle以查看其与localStorage配合使用。

您应该使用方法getItem（）。

let x = localStorage.getItem('toggled');

然后要检查变量。

https://developer.mozilla.org/ru/docs/Web/API/Storage/getItem

为什么读取localStorage值需要刷新页面才能显示由jQuery切换的CSS更改？

如何解决为什么读取localStorage值需要刷新页面才能显示由jQuery切换的CSS更改？

解决方法

检出jsfiddle以查看其与localStorage配合使用。

相关推荐