2014-11-07 45 views
1

我運行了一個jQuery樣式轉換器,可以在click上更改樣式表。我嘗試了一些解決方案,但是我找不到解決方案。 我不明白如何爲此設置一個cookie。請有人能幫助我解決這個問題嗎?jquery css styleswitcher將cookie設置爲css

標記:

<ul class="colors-list"> 
     <li><a title="Black" id="black" class="black" ></a></li> 
     <li><a title="Green" id="green" class="green" ></a></li> 
     <li><a title="Blue" id="blue" class="blue" ></a></li> 

    </ul> 

的jQuery

<pre><code>(function ($) { 
"use strict"; 
var mainApp = { 

    main_fun: function() { 

     /*===================================== 
     THEME SWITCHER SCRIPTS 
     ===================================*/ 

     //THE CALLING OF PANEL ON CLICKING PLUS BUTTON 

     jQuery('#switch-panel').click(function() { 
      if (jQuery(this).hasClass('show-panel')) { 
       jQuery('.switcher').css({ 'left': '-50px' }); 
       jQuery('#switch-panel').removeClass('show-panel'); 
       jQuery('#switch-panel').addClass('hide-panel'); 
      } else if (jQuery(this).hasClass('hide-panel')) { 
       jQuery('.switcher').css({ 'left': 0 }); 
       jQuery('#switch-panel').removeClass('hide-panel'); 
       jQuery('#switch-panel').addClass('show-panel'); 
      } 
     }); 

     $('#black').click(function() { 
      $('#mainCSS').attr('href', 'assets/css/style.css'); //THE STYLE SHEETS WITH THEIR PATHS 
     }); 
     $('#blue').click(function() { 
      $('#mainCSS').attr('href', 'assets/css/blue.css'); //THE STYLE SHEETS WITH THEIR PATHS 
     }); 
     $('#green').click(function() { 
      $('#mainCSS').attr('href', 'assets/css/green.css'); //THE STYLE SHEETS WITH THEIR PATHS 
     }); 
     $('#red').click(function() { 
      $('#mainCSS').attr('href', 'assets/css/red.css'); //THE STYLE SHEETS WITH THEIR PATHS 
     }); 



    }, 

    initialization: function() { 
     mainApp.main_fun(); 

    } 

} 


$(document).ready(function() { 
    mainApp.main_fun(); 
}); 

}(jQuery的));

+0

所以,它聽起來就像你想創建一個Cookie,商店當前/最後一個樣式表的名稱,所以返回到您的網頁/網站的用戶將擁有最後一次看到的相同樣式? 此線程將幫助在JS或jQuery中創建/設置Cookie http://stackoverflow.com/questions/4825683/how-do-i-create-and-read-a-value-from-cookie – Will 2014-11-07 00:22:48

回答

0

如果你看看這個主題 - How do I create and read a value from cookie?,有一些預先編寫的用於獲取和設置cookie的JS代碼。

就你而言,你可以在你的jQuery.click處理程序中設置cookie值。

您還需要一些在文檔準備就緒時運行的代碼,檢查客戶端是否存在cookie。如果存在,則將樣式表設置爲cookie的值。

我已經根據您自己的代碼爲您做了一個示例。您應該可以修改以適應您的情況。 http://jsfiddle.net/biz79/pdjmc0n3/1/

JS:

創建/設置1天后過期餅乾

$('#black').click(function() { 
     // stylesheet stuff... 
     createCookie('cookie','black',1); 
    }); 
    $('#blue').click(function() { 
     // stylesheet stuff... 
     createCookie('cookie','blue',1); 
    }); 
    //... 

如果一個cookie存在:

$(document).ready(function(){ 
     updateResult(); 
    }); 

    function updateResult() { 
     var cookieValue = getCookie('cookie'); 
     if (cookieValue.length) { 
     $('#mainCSS').attr('href', 'assets/css/' + cookieValue + '.css'); 
     } 
    }