我使用toggleClass在jquery中编写了一个函数。 函数是用按钮调用的。 我设法将其结果保存在会话存储中，因此当刷新页面时，页面上的暗对比被保存。 当我切换回切换状态时会出现问题。 然后会话存储会自动加载之前的设置，结果我仍然保持暗对比。 我尝试用另外两种方法编写这个脚本，使其正常工作，但不幸的是没有得到积极的结果。 如果你们中有人能帮助我，我将非常感激。 这几个小时我一直在想明白。
我的JQuery代码:
$(document).ready(function(){
var state = sessionStorage.getItem("toggleState");
if(state == "true"){
$('*').not('div.container *').toggleClass("black-contrast");
$('header').toggleClass("black-contrast-border");
$('img, div.container').toggleClass("overlay");
}
$('#black-contrast').click(function(){
$('*').not('div.container *').toggleClass("black-contrast");
$('header').toggleClass("black-contrast-border");
$('img, div.container').toggleClass("overlay");
});
});
我试着这样做:
$(document).ready(function(){
$('*').not('div.container *').toggleClass(sessionStorage.toggled);
$('#black-contrast').on('click',function(){
if (localStorage.toggled != "black-contrast" ) {
$('*').not('div.container *').toggleClass("black-contrast", true );
localStorage.toggled = "black-contrast";
} else {
$('*').not('div.container *').toggleClass("black-contrast", false );
localStorage.toggled = "";
}
});
});
我认为问题出在onclick回调函数上，您没有切换SessionStorage.ToggleState
您需要在用户每次单击该按钮时切换SessionStorage.ToggleState。
这样试试看
$(document).ready(function() {
var state = sessionStorage.getItem("toggleState");
if (state == "true") {
$('*').not('div.container *').toggleClass("black-contrast");
$('header').toggleClass("black-contrast-border");
$('img, div.container').toggleClass("overlay");
}
$('#black-contrast').click(function() {
const state = sessionStorage.getItem("toggleState");
state ? sessionStorage.removeItem("toggleState") : sessionStorage.setItem("toggleState");
$('*').not('div.container *').toggleClass("black-contrast");
$('header').toggleClass("black-contrast-border");
$('img, div.container').toggleClass("overlay");
});
});
