集體類的jQuery插件餅乾

我試圖創建jQuery Cookie plugin 集體類的jQuery插件餅乾

我一直在破壞我的頭幾個小時，「高對比度」的風格切換，閱讀了大量的問題上stackoverflow.com ，但我沒有解決我的問題。

想法是ID爲「開關」跨度元件上，當點擊體上的標籤切換級「高對比度」。在CSS樣式表裏面，我有一套我想應用的規則，如果body標籤有類「highcontrast」。

這是上述方案的jQuery代碼：

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

如果在開關元件體類單擊翻轉。現在，如果轉到另一頁面，cookie就會出現並設置了該值，但body類「highcontrast」不再存在。

我錯過了什麼？

來源

2013-02-25 weezle

您可以在顯示代碼的地方閱讀cookie值並在頁面加載時設置正文上的類嗎？ – Strille 2013-02-25 11:49:54

您的toggleClass按照代碼進行點擊，因此移動到其他頁面不會自動觸發點擊。 – 2013-02-25 11:51:18

缺碼讀取cookie時頁面加載，如果它存在變身類 – charlietfl 2013-02-25 11:53:34

好了，這是驗證和工作...

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-25 12:33:01 derekmx271

我測試了你的解決方案，它看起來很完美。謝謝！ – weezle 2013-02-25 13:07:06

不客氣。它可以清除一些變量，但這是基本的想法...享受！ – derekmx271 2013-02-25 16:28:56

我會查看插件文檔以查看是否應從點擊事件中刪除「expires」值（如果cookie已存在）...您可以使用Google Chrome「Inspect」面板查看Cookie（右鍵單擊>檢查元素>資源>餅乾），並檢查是否過期日期設置回七天你點擊跨度。（你可能會也可能不希望發生這種情況）。 – derekmx271 2013-02-25 16:32:50

嘗試這樣的事情，在你的頁面加載：

if ($.cookie('bodyclass')) { 
    $('body').toggleClass('highcontrast'); 
}

來源

2013-02-25 11:54:37

您需要設置值的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-25 11:55:46 sjdaws

我想你的解決方案，但問題是這樣的：如果爲第二時間#switch元素上單擊（一日一次，你的身體級設置爲「高對比度「），body類被刪除，但在這種情況下cookie可能也應該被刪除，因爲當你轉到另一個頁面時，body類再次出現。 – weezle 2013-02-25 13:07:35

在document.ready檢查餅乾預設，如果它存在，那麼將它添加到身體的值設置。

例

$(document).ready(function(){ 
    if($.cookie('bodyclass')) 
    { 
     $('body').addClass($.cookie('bodyclass')); 
    } 
});

來源

2013-02-25 11:56:55

集體類的jQuery插件餅乾

回答

相關問題