问题描述
我正在尝试使用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