2

我有一个要添加功能的按钮。当您单击按钮时，站点的样式将变为高对比度版本（即样式表 high_contrast.css 被附加到头部）。显然我做错了一些事情，因为下面的代码只是切换当前页面的样式，当您导航到另一个页面时，它会切换回默认样式。我可能不应该每次都设置那个变量 highContrast。我想使用查询 cookie 插件（https://github.com/carhartl/jquery-cookie）来完成此操作，但在这种情况下并不真正了解如何使用它。

这是 HTML

<div id="contrast-btn"><a href="#" rel="css/high-contrast.css">high contrast</a></div>

这是脚本

$(document).ready(function(){
    var highContrast = false;
    $("#contrast-btn a").click(function () {
        if (!(highContrast)) {
            $('head').append('<link rel="stylesheet" href="css/high-contrast.css" type="text/css" id="hc_stylesheet"/>');
            highContrast = true;
        }       
        else {
            // remove the high-contrast style
            $("#hc_stylesheet").remove();
            highContrast = false;
        }
    });
});

谢谢你的帮助

4

2 回答 2

2

您必须通过 cookie 获取和设置值：

$(document).ready(function(){
// DRY wrapper function
function appendStyleSheet() {
  $('head').append('<link rel="stylesheet" href="css/high-contrast.css" type="text/css" id="hc_stylesheet"/>'); 
}
// append the style sheet on load if the cookie is set to true
if ($.cookie('high_contrast') == 'true') {
  appendStyleSheet();      
}
$("#contrast-btn a").click(function () {
    if ($.cookie('high_contrast') != 'true') {

        appendStyleSheet();      
        $.cookie('high_contrast', 'true'); // set the cookie to true
    }       
    else {
        // remove the high-contrast style
        $("#hc_stylesheet").remove();
        $.cookie('high_contrast', 'false');
    }
});
});

您可以将过期或站点范围内的有效性等选项添加到 cookie，因此如果您希望 cookie 有效期为一年，请将其添加到 cookie 命令

$.cookie('high_contrast', 'false', {expires: 365});

如果您希望它在您的整个域中有效，这很可能是您的实现的情况，您可以添加路径“/”：

$.cookie('high_contrast', 'false', {path: '/'});
于 2012-07-09T13:58:53.837 回答
1

您可以highContrast在全局上下文中设置，这将有助于您稍后在同一页面上进行评估：

var highContrast = false;
$(document).ready(function(){
    // [...]
    highContrast = true;
    // [...]
});

但是该值会在每次页面刷新时丢失，因此您可以 - 如您所愿 - 使用jquery-cookie 设置 cookie

$.cookie('highContrast', 'true', { path: '/' });

并在页面加载时阅读：

if($.cookie('highContrast') && $.cookie('highContrast') === "true") {};

通过设置path = '/'，cookie 将在整个域中可用。

所以你的代码会变成这样：

$(document).ready(function(){
    // Append the stylesheet on page load
    if ($.cookie('highContrast') === "true") {
        $('head').append('<link rel="stylesheet" href="css/high-contrast.css" type="text/css" id="hc_stylesheet"/>');
    }
    // Add the click handler to switch the stylesheet on and off
    $("#contrast-btn a").click(function () {
        if (!($.cookie('highContrast') === "true")) {
            $('head').append('<link rel="stylesheet" href="css/high-contrast.css" type="text/css" id="hc_stylesheet"/>');
            $.cookie('highContrast','true',{path:'/'});
        }       
        else {
            // remove the high-contrast style
            $("#hc_stylesheet").remove();
            $.cookie('highContrast','false',{path:'/'});
        }
    });
});
于 2012-07-09T13:57:02.247 回答