2

機能を追加したいボタンが1つあります。ボタンをクリックすると、サイトのスタイルがハイコントラストバージョンに変わります（つまり、スタイルシート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を1年間有効にする場合は、これを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 に答える