个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
撇开潜在的编码效率问题不谈，我为我的切换按钮组合了一个 jQuery 函数。单击打开和关闭开关时，网站会为暗模式应用各种 CSS 类和样式。这非常有效:
$(function() {
$(".slider.round").click(function() {
$("#canvas-wrapper").toggleClass("dark-canvas");
$("#page-body-wrapper p").toggleClass("dark-body-text");
$("h2, h3, .summary-title a, .summary-read-more-link, .summary-excerpt a, #block-yui_3_17_2_32_1456852631790_12688 a").toggleClass("dark-headings-links");
$("#block-yui_3_17_2_2_1457035305182_118918 h2").toggleClass("dark-intro");
$(".summary-item").toggleClass("dark-summary");
$(".summary-excerpt strong, #sidebar-one h2").toggleClass("dark-excerpt-sidebar");
$("#sidebar-one, .sqs-col-1").toggleClass("dark-sidebar");
$(".summary-metadata-item a, .summary-metadata-item--date").toggleClass("dark-metadata");
});
});
但是，有一个大问题。假设访问者打开黑暗模式，相应地改变外观。当他们重新加载页面或在页面之间移动时，此状态每次都会自行重置。当用户浏览一个深色界面时，这会很刺耳，然后突然呈现一个以白色为主的设计。
我可以向此函数添加什么以允许那些 toggleClass 状态在页面之间持续存在？另一位用户向我指出了 localStorage 和 sessionStorage。不幸的是，我仍然是 jQuery 的新手，缺乏将复杂的东西组合在一起的知识——更不用说理解相关的术语了。
有人可以帮忙吗？这将是一个巨大的帮助和进步!
感谢百万人，你们是摇滚明星 :)
最佳答案
我建议您直接在 CSS 文件中简化代码。您完全没有必要使用 JavaScript 为每个元素添加大量类。
相反，您可以使用一个类，我们称它为“mode--dark”，我们将把它添加到正文中。
在您的 CSS 中，此类可以如下所示:
.mode--dark #canvas-wrapper {
// your styles
}
.mode--dark #page-body-wrapper p {
// your styles
}
//--------------------> right after body script start (this should go right after <body> tag
function getMode() {
// let's check whether key "mode" exists in our localStorage and if so return true, false otherwise
return localStorage.getItem('mode') == 'true' ? true : false;
}
var body = document.querySelector('body'),
modeClass = 'mode--dark',
switchClass = 'js-switch'; // add any class name to your input for switching between themes and retype it here
if (getMode()) {
body.classList.add(modeClass);
}
document.addEventListener('change', function (e) {
var target = e.target;
if (target.className.indexOf(switchClass) > -1) {
if(!getMode()) {
body.classList.add(modeClass);
// set dark mode to true
localStorage.setItem('mode', true);
} else {
body.classList.remove(modeClass);
// set dark mode to false
localStorage.setItem('mode', false);
}
}
});
//--------------------> right after body script end
//--------------------> this can be put anywhere start
document.addEventListener('DOMContentLoaded', function (e) {
var switchInput = document.querySelector('.' + switchClass);
if(getMode()) {
switchInput.checked = true;
}
});
//--------------------> this can be put anywhere end
关于javascript - 当访问者在页面之间移动时，如何使 toggleClass 更改持续存在？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56517457/
25
4
0
SELECT *, `o_cheque_request.member_id`, `o_cheque_request.wallet_id` FROM `o_cheque_request`, `o_mem
根据某一条件从数据库表中查询 『有』与『没有』，只有两种状态，那为什么在写SQL的时候，还要**SELECT count(*)**呢？ 无论是刚入道的程序员新星，还是精湛沙场多年的程序员老白，都是一如
我试图找出一个文件是否存在，如果存在，验证css样式是否已经存在，如果不存在，将它们写在文件末尾... 我已经完成了这一切，但分 3 个步骤: 该文件是否存在？ FileInfo fi= new Fi
我们正在开发即时消息传递应用程序，并且需要在用户的化身上用绿点显示用户 friend 的“状态”。 “状态”远远超出了“my_app_is_opened_and_on_focus”，这意味着(我猜可能
模式 Movie(title, year, director, budget, earnings) Actor(stagename, realname, birthyear) ActedIn(stag
我有一个正在尝试创建的 MySQL 触发器，但无法获得正确的语法。 触发器应该遍历一组关键字并将其与插入数据库的新帖子的标题进行匹配。如果找到匹配项，它应该将新帖子分配给该存储桶并更新存储桶的关键字集
我有 3 个表......用户、更新和碰撞。 我想向发出 api 请求的用户返回最新订单的 feed 更新，并提供显示 feed 中每个状态所需的所有数据。我还需要包括更新是否已被发出 api 请求的
我正在尝试呈现一个带有 UIView 的 UIViewController。 以下是我在 viewDidLoad 方法中尝试的代码。 //create the view controller UIVi
我正在努力弄清楚如何在不对 mysql 进行两次调用的情况下从一个表中检查两件事。 我有一个 Members 表。我想测试MemberID 列中是否存在某个值，以及PhoneNumber 列中是否存在
以下代码给出了一个没有 Do Compile 错误的循环: Loop Sheets("Snap").Rows(1).AutoFilter Field:=5, Criteria1:=List
是否可以通过检查“dig”的输出来检查域名的存在？ 在绑定(bind)源中，我发现了这些常量: 0 DNS_R_NOEROR 1 DNS_R_FORMERR 2 DNS_R_SERVFAIL 3 DN
Controller 有问题 我在 Windows 上使用服务器，一切正常，但在互联网上我试图访问页面 social_apartament/beauty_life/并且找不到该页面，代码错误 404这
/** This is struct S. */ struct S(T) { static if(isFloatingPoint!T) { /// This version works
JVM 类型删除如何帮助 Clojure？没有它，Clojure 还能存在吗？如果 JVM 有具体化的类型会发生什么？也就是说，Clojure 将如何改变？ 最佳答案 Clojure 根本不会有太大变
许多论文等提到对“system()”的调用是不安全且不可移植的。我不反对他们的论点。 不过，我注意到许多 Unix 实用程序都有一个等效的 C 库。如果没有，源可用于各种这些工具。 虽然许多论文和此类
在我的 Node js 应用程序中，我有一个用户登录 api。上面我在服务器端代码中创建了一个名为 customerid 的变量。现在，当用户身份验证成功时。我将他的 userid 值存储在我的 cu
我有一个工作资源管理器组，由 Ubuntu 14.04 虚拟机、网络接口(interface)、公共(public) IP 地址和存储帐户组成。我已经从这组资源中创建了一个模板。 当我尝试部署这组资源
我有一个函数createminor4(arr，锦标赛)它基本上将arr分成4组，每组8人，然后将它们一次交换到tourney 1组。从那里它插入四个{}，其中有 4 个带有空数组的键。 我已经在 Ch
我有一个图表，其中有两个图例。我需要更改其中一个图例的点的大小。 我需要更改图例中“市场类型”的项目符号大小。我使用示例 here但不适用于我的图表。 我的代码如下: k <- ggplot(subs
我有 fiddle here展示我正在尝试做的事情。 我有一个动态生成的表，因此列可以按用户选择的任何顺序显示。因此，我尝试获取两个特定 header 的索引，以便可以将 CSS 类添加到这两列以供稍
我是一名优秀的程序员,十分优秀！