[英]Let the user choose between dark and light mode (save settings for every page, cookies?)
我刚刚开始使用javascript和jQuery,所以我不是专家,目前我正在努力解决我认为可能被称为“基本任务”的问题?
我想在主页上包含两个按钮,用户可以将网站模式设置为暗或亮。 然后,当用户进入网站并点击不同的链接时,应记住这些设置。
到目前为止,我添加了更改字体的背景颜色和颜色的功能onClick但我只能在当前页面上执行此操作。
我想我必须以某种形式使用cookies ..?
这是我的小提琴: http : //jsfiddle.net/sqn47kmt/10/并且是我的代码
$(document).ready(function($) {
$(".darkmode").click(function() { // darkmode for basic body, adds css styles on click
$("html").addClass("darkclass");
});
$(".darkmode").click(function() { // darkmode for headline body, adds css styles on click
$("h3").addClass("darkclass");
});
$(".darkmode").click(function() { // darkmode for links, adds css styles on click
$("a").addClass("darkclass");
});
$(".normalmode").click(function() { // normalmode for basic body, removes css styles on click
$("html").removeClass("darkclass");
});
$(".normalmode").click(function() { // normalmode for headlines, removes css styles on click
$("h3").removeClass("darkclass");
});
$(".normalmode").click(function() { // normalmode for links, removes css styles on click
$("a").removeClass("darkclass");
});
});
首先,在同一元素上为同一事件提供多个重复事件处理程序是完全多余的。 您可以将所有逻辑放在一个处理程序中。 也就是说,将这些类单独添加到JS中的那些元素并不是一个好主意,因为它将UI和JS紧密联系在一起。
更好的想法是更改JS逻辑,以便它只在body
上设置类。 然后,您可以根据该body类简单地修改所有相关元素的CSS。 这样你只需要修改CSS来改变'暗模式'的UI。
要保存状态,您可以使用cookie或localStorage,然后在页面加载时从中读取。 下面的示例使用localStorage,但cookie的模式是相同的。
$(document).ready(function($) {
var mode = localStorage.getItem('mode');
if (mode)
$('body').addClass(mode);
$(".darkmode").click(function() {
$("body").addClass("darkclass");
localStorage.setItem('mode', 'darkclass');
});
$(".normalmode").click(function() {
$("body").removeClass("darkclass");
localStorage.setItem('mode', null);
});
});
body.darkclass h3,
body.darkclass a {
background-color: black;
color: white;
}
您可以使用window.localStorage
来设置cookie。
$(document).ready(function () {
//check the button which is clicked
var darkClick = localStorage.getItem('darkBtnClicked'),
normalClick =
localStorage.getItem('normalBtnClicked');
if (darkClick == "true") {
console.log('clicked on dark');
$("html, h3, a, body").addClass("darkclass");
}
if (normalClick == "true") {
console.log('clicked on normal');
$("html, h3, a, body").removeClass("darkclass");
}
//on click of the button add the class we need a nd set the cookies
$(".darkmode").click(function () {
//Adding class to all the elements you need in just one line.
$("html, h3, a, body").addClass("darkclass");
//setting cookies for the button click
localStorage.setItem('darkBtnClicked', true);
localStorage.setItem('normalBtnClicked', false);
});
$(".normalmode").click(function () {
$("html, h3, a, body").removeClass("darkclass");
//setting cookies for the button click
localStorage.setItem('normalBtnClicked', true);
localStorage.setItem('darkBtnClicked', false);
});
});
在jQuery和For cookies的主体末尾添加脚本以下的按钮。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
即使您重新加载页面并通过网站重定向页面,这也应该有效。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.