我正在尝试使用jQuery Cookie 插件创建一个“高对比度”样式切换器
我现在已经忙了几个小时了，在 stackoverflow.com 上阅读了很多问题，但我没有解决我的问题。
想法是在单击 ID 为“switch”的 span 元素时在 body 标记上切换类“high contrast”。在 CSS 样式表中，我有一组规则，如果 body 标记具有“高对比度”类，我想应用这些规则。
这是上述场景的 jQuery 代码：
$("#switch").click(function () {
$.cookie('bodyclass', 'highcontrast', { expires: 7, path: '/' });
$('body').toggleClass('highcontrast');
});
如果你点击 switch 元素 body 类被切换。现在，如果您转到另一个页面，cookie 在那里并且值已设置，但主体类“highcontrast”不再存在。
我错过了什么？
好的，这是经过验证和工作的......
HTML：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Style Switcher</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="../../plugins/cookie/jquery.cookie.js"></script>
<script src="switch.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<span id="switch">Switch</span>
</body>
</html>
jQuery：
$(document).ready(function(){
// Check (onLoad) if the cookie is there and set the class if it is
if ($.cookie('highcontrast') == "yes") {
$("body").addClass("highcontrast");
}
// When the span is clicked
$("#switch").click(function () {
// Check the current cookie value
// If the cookie is empty or set to no, then add highcontrast
if ($.cookie('highcontrast') == "undefined" || $.cookie('highcontrast') == "no") {
// Set cookie value to yes
$.cookie('highcontrast','yes', {expires: 7, path: '/'});
// Add the class to the body
$("body").addClass("highcontrast");
}
// If the cookie was already set to yes then remove it
else {
$.cookie('highcontrast','no', {expires: 7, path: '/'});
$("body").removeClass("highcontrast");
}
});
});
CSS：
body {
width:100%;
height:100%;
}
body.highcontrast {
background-color:#000;
color:#fff;
}
在页面加载时尝试这样的事情：
if ( $.cookie('bodyclass') ) {
$('body').toggleClass('highcontrast');
}
您需要根据用户的需要设置值highcontrast，并在页面加载时读取它。
// switch cookie
$("#switch").click(function() {
// check current cookie
var current = $.cookie('highcontrast');
// set new cookie and adjust contrast
if (current) {
// remove cookie
$.cookie('highcontrast', null);
// remove class
$('body').removeClass('highcontrast');
} else {
// add cookie
$.cookie('highcontrast', 1, { expires: 7, path: '/' });
// add class
$('body').addClass('highcontrast');
}
});
// set contrast on page load
$(function() {
var value = $.cookie('highcontrast');
if (value) {
// add contrast class
$('body').addClass('highcontrast');
}
});
document.ready检查 cookie 预设和值是否存在，然后将其添加到正文。
例子
$(document).ready(function(){
if($.cookie('bodyclass'))
{
$('body').addClass($.cookie('bodyclass'));
}
});