我写了一段代码，它包含了春/夏/秋/冬模式，而不是光/暗模式。下面是一个季节的例子:
const springThemeOn = sessionStorage.getItem("springtheme")
if (springThemeOn==="true"){
document.body.className = "spring-theme";
spring.classList.add('hide-icon');
summer.classList.remove('hide-icon');
autumn.classList.remove('hide-icon');
winter.classList.remove('hide-icon');
}
//spring change
springIcon.addEventListener('click', () => {
document.body.classList.toggle('spring-theme');
spring.classList.toggle('show-icon');
summer.classList.toggle('show-icon');
autumn.classList.toggle('show-icon');
winter.classList.toggle('show-icon');
// Store toggle info between pages
if (document.body.className.includes("spring-theme")){
// Currently in spring mode
sessionStorage.setItem("spring-theme", "true")
} else {
// Currently in other mode
sessionStorage.setItem("spring-theme", "false")
}
})
想象一下四季都是这样。代码可以工作，但是当我分别单击每个图标时，它们都将自己添加到body类中，如下所示:<body class="b-page spring-theme summer-theme autumn-theme winter-theme">，并且只显示最后单击的模式。
我希望能够通过所有四个图标切换，而不必单击/关闭每个图标，以便从类体中添加/删除它们。我不希望它们在类主体中堆叠。有解决办法吗?谢谢你！
让它们共享一个存储项，而不是为每个主题设置一个存储项。
const theme = sessionStorage.getItem("theme");
if (theme === 'spring') {
// ...
} else if (theme === 'summer') {
// ...
}
// etc
在点击监听器中，类似于:
if (document.body.className.includes("spring-theme")){
sessionStorage.setItem('theme', ''); // remove any existing themes
} else {
sessionStorage.setItem('theme', 'spring'); // add it
}
这样，就不会发生碰撞。