jquery的cookie中的CSS樣式切換

Question

我試圖在jQuery的樣式表切換器與成功，但是當我嘗試使用jquery.cookie插件保存在cookie中的變化，它不工作..

這裏的jQuery代碼：

$("#theme-cp ul li").click(function() { 
    var $pattern = $(this).css("background-image"); 
    $("body").css("background-image",$pattern); 
    $("#main-wrapper").css("background-image",$pattern); 
    $.cookie('background',$pattern); 
    alert($.cookie('background')); 
}); 

警報是做了檢查，但它不工作....

Answer 1

我最近做了同樣的事情，我得到它的工作，以爲我會分享我的代碼您。

jsFiddle

jQuery的

//If Cookie isn't blank (i.e. do we have a cookie set at all?) 
if($.cookie('colour')!='') 
{ 
    $('body').addClass($.cookie('colour')); //set the body to the cookie colour 
} 

$('#accessibility-colours a').each(function(index) 
{ 
    $(this).click(function(e) 
    { 
     e.preventDefault(); 

     switch(index) 
     { 
      //black text white background 
      case 0: 
       $('body').removeClass($.cookie('colour')); 
       $('body').addClass('blackText-whiteBackground'); 
       $.cookie('colour', null); 
       $.cookie('colour', 'blackText-whiteBackground',{ expires: 7, path: '/' }); 
      break; 

      //black text yellow background 
      case 1: 
       $('body').removeClass($.cookie('colour')); 
       $('body').addClass('blackText-yellowBackground'); 
       $.cookie('colour', null); 
       $.cookie('colour', 'blackText-yellowBackground',{ expires: 7, path: '/' }); 
      break; 

      //black text pink background 
      case 2: 
       $('body').removeClass($.cookie('colour')); 
       $('body').addClass('blackText-pinkBackground'); 
       $.cookie('colour', null); 
       $.cookie('colour', 'blackText-pinkBackground',{ expires: 7, path: '/' }); 
      break; 

      //blue text white background 
      case 3: 
       $('body').removeClass($.cookie('colour')); 
       $('body').addClass('blueText-whiteBackground'); 
       $.cookie('colour', null); 
       $.cookie('colour', 'blueText-whiteBackground',{ expires: 7, path: '/' }); 
      break; 

     } 
    }); 

CSS

html, body        {font:0.9em/1.1em "Arial", sans-serif} 

/* Accesibility Icons */ 
#accessibility-colours     {margin:0px; overflow:hidden;} 
#accessibility-blackWhite    {background:url(../images/design/icon-accessibility-blackWhite.gif) 0 0 no-repeat} 
#accessibility-blackYellow    {background:url(../images/design/icon-accessibility-blackYellow.gif) 0 0 no-repeat} 
#accessibility-blackPink    {background:url(../images/design/icon-accessibility-blackPink.gif) 0 0 no-repeat} 
#accessibility-blueWhite    {background:url(../images/design/icon-accessibility-blueWhite.gif) 0 0 no-repeat} 

    #accessibility-colours a   {float:left; display:block; margin:6px 0 0; padding:4px; border:0; width:16px; height:16px;} 
    #accessibility-colours a span  {margin:0; padding:0; position:absolute; top:-9999px; left:-9999px;} 


/* Colours to be set for accessibility choice */ 
.blackText-whiteBackground    {background:white; color:black} 
.blackText-yellowBackground    {background:yellow; color:black} 
.blackText-pinkBackground    {background:pink; color:black} 
.blueText-whiteBackground    {background:white; color:blue} 

HTML

<div id="accessibility-colours"> 
     <a id="accessibility-blackWhite" href="#" title="Black text/White background"><span>Black text/White background</span></a> 
     <a id="accessibility-blackYellow" href="#" title="Black text/Yellow background"><span>Black text/Yellow background</span></a> 
     <a id="accessibility-blackPink" href="#" title="Black text/Pink background"><span>Black text/Pink background</span></a> 
     <a id="accessibility-blueWhite" href="#" title="Blue text/White background"><span>Blue text/White background</span></a> 
    </div> 

    <h1>This is the H1 tag</h1> 

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam facilisis nibh sed tortor blandit interdum semper leo ullamcorper. 
    Pellentesque gravida hendrerit accumsan. Mauris pretium blandit augue, suscipit ultricies libero aliquam sit amet. Aliquam egestas eleifend augue, 
    et hendrerit dolor dictum facilisis. Nulla facilisi. Integer auctor elementum purus id lobortis. Aliquam sit amet sem erat. Integer nec orci risus. 
    Quisque eu purus augue. Sed vehicula venenatis metus eget molestie. Proin vel ultrices augue. Duis in laoreet tellus. Proin eget gravida purus. 
    Donec ut placerat velit. Etiam ultrices, nibh nec ultricies iaculis, odio orci porta dui, quis semper nunc ante interdum augue. 
    Curabitur elementum orci interdum nibh adipiscing blandit. Curabitur diam arcu, semper id facilisis id, tempor et nisi. 
    Vestibulum nisl dolor, aliquam et posuere ut, tincidunt sed mi.</p>