集体类的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插件饼干

回答

相关问题