jQueryとクッキーを使用したカラーページスイッチャー

Question

ここにクッキーを追加するには助けが必要ですが、試してもできません。どのようにヘルプを追加すればいいですか？ここで

$(document).ready(function(){ 
    $("li.black_c").click(function(){ $ 
     (".main").removeClass('bg2 , bg3').addClass("bg1"); 
    }); 

    $("li.blue_c").click(function(){ $ 
     (".main").removeClass("bg1 , bg3").addClass("bg2"); 
    }); 

    $("li.red_c").click(function(){ $ 
     (".main").removeClass("bg1 , bg2").addClass("bg3"); 
    }); 

}); 

はデモhttp://jsfiddle.net/jhMfw/に取り組んでいるが、クッキー

Answer 1

を使用する必要があり、私はそれを使用する方法を学ぶためにあなたのjQuery cookie pluginとtutorial hereをお勧めします。

デモンストレーション：http://jsfiddle.net/jhMfw/2/

$(document).ready(function(){ 

    $("li.black_c").click(function(){ $ 
     (".main").removeClass('bg2 , bg3').addClass("bg1"); 
     $.cookie('mycookie','bg1'); 
    }); 

    $("li.blue_c").click(function(){ $ 
     (".main").removeClass("bg1 , bg3").addClass("bg2"); 
     $.cookie('mycookie','bg2'); 
    }); 

    $("li.red_c").click(function(){ $ 
     (".main").removeClass("bg1 , bg2").addClass("bg3"); 
     $.cookie('mycookie','bg3'); 
    }); 

    if ($.cookie('mycookie')) { 
     $('.main').addClass($.cookie('mycookie')); 
    } 

});​ 

Answer 2

ずにあなたは非常に簡単な使用方法についてはjQuery.cookie()

$.cookie('bckground-color', 'bg1');//set a cookie 
$.cookie('bckground-color');//retrieve a cookie 

$(document).ready(function(){ 
    var startClass = $.cookie('bckGround'); 
    $(".main").addClass(startClass); 
    $("li.black_c").click(function(){ $ 
     (".main").removeClass('bg2 , bg3').addClass("bg1"); 
     $.cookie('bckGround', 'bg1'); 
    }); 

    $("li.blue_c").click(function(){ $ 
     (".main").removeClass("bg1 , bg3").addClass("bg2"); 
     $.cookie('bckGround', 'bg2'); 
    }); 

    $("li.red_c").click(function(){ $ 
     (".main").removeClass("bg1 , bg2").addClass("bg3"); 
     $.cookie('bckGround', 'bg3'); 
    }); 

});​ 

Answer 3

はより良いあなたがあなたのボタンをクリックすることで置き換えること、をテーマにしたCSSを作成します。あなたが追加されますあなたのhtmlファイルの頭の中で

CSS

black.css

.button { 
    background-color: black; 
} 

blue.css

.button { 
    background-color: blue; 
} 

red.css

.button { 
    background-color: red; 
} 

このようなスクリプトタグ

<link rel="stylesheet" type="text/css" href="css/black.css" name="branded"/> 

とあなたのjavascript：

var cookieName = 'current-branding'; 

function changeBranding(branding) { 
    $.cookie(cookieName, branding); 
    $('head link[name=branded]').attr('href', 'css/' + branding + '.css'); 

} 

$(document).ready(function(){ 
    if($.cookie(cookieName)) { 
     changeBranding($.cookie(cookieName)); 
    } 

    $("li.black_c").click(function(){ $ 
     changeBranding('black'); 
    }); 

    $("li.blue_c").click(function(){ $ 
     changeBranding('blue'); 
    }); 

    $("li.red_c").click(function(){ $ 
     changeBranding('red'); 
    }); 

});