Javascript 如何在动态页面上正确切换主题？

我使用以下jQuery代码在我的网站的两个主题（白天/晚上）之间切换

$('#switch').on('click', function () { $('*').toggleClass('switch-bg'); });

当我单击标识为“switch”的按钮时，一切都正常工作，该按钮添加/删除可用CSS属性（在本例中为body属性）的类“switch bg”

例如：

body {background: #fff;}   /* DAY mode (default) */
body.switch-bg {background: #000;}   /* NIGHT mode */

当我处于“夜间模式”时，一些内容以默认状态“日间模式”加载到页面中，这会导致两者混合

更多详情：

• 所有动态内容（外部HTML）都通过导航菜单中的超链接加载到我的主页中的div（内部）中。这是使用jQuery实现的
• 仅当动态内容已加载时，切换才会对其起作用。如果重新加载相同或不同的内容，则当加载的内容处于默认状态“日间模式”且主页仍处于“夜间模式”时，会出现问题

选择该选项时，我希望所有内容都处于“夜间模式”。

用于保存用户的首选项。每次加载新内容时，请阅读位置存储条目，并根据保存的选项设置类。

不要将类应用于所有内容（*）。只需将其应用于主体，并根据上下文设置样式

e、 g

---

解决问题的好办法可以是：

• 不要更改所有元素的类，只需在

  html

  中切换一个类即可。在这种情况下，每晚

  $（'#switch'）.on（'click'，function（）{$（'html'）.toggleClass（'nightly'）；}）
  

• 不是基于元素自己的类来设置元素的主题，而是基于父元素的类来设置元素的主题。在本例中，

  html

  .button {
      background-color: #fff; // day mode
  }
  
  .nightly .button {
      background-color: #000; // night mode
  }
  

---

我使用（*）只是为了测试。此外，它对主体不起作用，但对html起作用。谢谢你，山姆！你说身体不起作用是什么意思？你能把你的css添加到这个问题上吗？@clabe45我猜他只是把样式应用到身体上，这意味着在这种情况下规则必须是

。switch bg.body el

才能工作（为什么把它添加到

html

中有效。这就是我添加到html

$（'#switch'）。on（'click'，function（）{$（'html'）。toggleClass（'switch-bg'））; })

在整个网站上使用上述CSS语法处理20多个元素时。你能改进本文的标题吗？其他人会更容易找到它。@zaclummys有什么建议吗？比如如何在动态页面上正确切换主题？听起来不错。有什么反对将类和相应的CSS设置为全局的吗o

body

还是容器div？

.button {
    background-color: #fff; // day mode
}

.nightly .button {
    background-color: #000; // night mode
}