0

jQueryCookieプラグインを使用して「ハイコントラスト」スタイルのスイッチャーを作成しようとしています

私はここ数時間頭をつぶしていて、stackoverflow.comでたくさんの質問を読んでいますが、問題を解決できませんでした。

アイデアは、IDが「switch」のspan要素をクリックしたときに、bodyタグのクラス「highcontrast」を切り替えることです。CSSスタイルシートの中に、bodyタグにクラス「highcontrast」がある場合に適用したい一連のルールがあります。

これは、上記のシナリオのjQueryコードです。

$("#switch").click(function () {
    $.cookie('bodyclass', 'highcontrast', { expires: 7, path: '/' });
    $('body').toggleClass('highcontrast');
});

スイッチ要素をクリックすると、本体クラスが切り替わります。これで、別のページに移動すると、Cookieが存在し、値が設定されますが、ボディクラス「highcontrast」は存在しなくなります。

何が足りないの？

4

4 に答える 4

5

さて、これは検証され、機能しています...

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;
    }
于 2013-02-25T12:33:01.030 に答える
0

document.readyクッキーのプリセットと値のチェック時に、存在する場合はそれを本文に追加します。

例

$(document).ready(function(){
   if($.cookie('bodyclass'))
   {
       $('body').addClass($.cookie('bodyclass'));
   }
});
于 2013-02-25T11:56:55.010 に答える
0

ユーザーが望むものに応じて の値を設定し、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');

    }

});
于 2013-02-25T11:55:46.340 に答える
0

ページの読み込み時に、次のようなことを試してください。

if ( $.cookie('bodyclass') ) {
    $('body').toggleClass('highcontrast');
}
于 2013-02-25T11:54:37.997 に答える