隐藏和显示基于Cookie值的内容

这是我的Jquery：

$("#tool").click(function() { $(".chelp").slideToggle(); $("wrapper").animate({ opacity: 1.0 },200).slideToggle(200, function() { $("#tool img").toggle(); }); }); 

单击#tool img #wrapper与.chelp一起隐藏。

我需要使用cookie来控制它，所以当用户隐藏#wrapper时，它会隐藏在所有页面上或重新访问页面时。

我知道有一个jQuery Cookie插件，但我想用普通的Javascript而不是包含另一个插件来做这件事。

任何人都可以告诉我如何在普通的javascript中构建它并与JQuery合并创建一个cookie，然后每次加载页面时检查cookie，看看是否应该隐藏或显示#wrapper？

Answer 1

Cookie扩展程序足够轻，您无需创建新文件 – 只需将其插入主javascript文件即可。 我已经这样做了，它运作得很好。

要使用普通的javascript并使用jQuery重新集成它本质上就是使用插件。 （看看Cookie的简短原始代码是了解如何编写自己的插件的好方法。）

更新

这是一些可用于测试和设置cookie的基本jQuery。

  if ( $.cookie("hide-alert") == "true" ) { $("#legal-alert").hide(); } $("#legal-alert").append("
x
"); $(".close-alert").live("click", function() { $(this).parent(".alert").slideUp(); $.cookie("hide-alert", "true", { expires: 365 }); }); 

您需要的所有文档都在插件本身（我删除它以使其足够小以直接放入我的js文件中）。 显然，你可以改变’过期’等。 请注意，上面的代码设置了一个按钮来关闭/隐藏框，然后为onClick设置一个实时监听器，这就是隐藏你要隐藏的框（我在上面称之为“#legal-alert”）。

Answer 2

您可以在javascript中使用document.cookie W3C破坏设置cookie。 如果您从该教程中获取函数，我认为这是您想要的：

 $("#tool").click(function() { $(".chelp").slideToggle(); if(!getCookie("shownWrapper")) { setCookie("shownWrapper", "true", null); $("wrapper").animate({ opacity: 1.0 },200).slideToggle(200, function() { $("#tool img").toggle(); }); } }); 

祝好运！

Answer 3

如果您想编写纯JS来执行此操作，您可以尝试：

 function setCookie(c_name,value,expiredays) { var exdate=new Date(); exdate.setDate(exdate.getDate()+expiredays); document.cookie=c_name+ "=" +escape(value)+ ((expiredays==null) ? "" : ";expires="+exdate.toUTCString()); } function getCookie(c_name) { if (document.cookie.length>0) { c_start=document.cookie.indexOf(c_name + "="); if (c_start!=-1) { c_start=c_start + c_name.length+1; c_end=document.cookie.indexOf(";",c_start); if (c_end==-1) c_end=document.cookie.length; return unescape(document.cookie.substring(c_start,c_end)); } } return ""; } var default_state = getCookie("state"); if(default_state == "hidden") { $("#wrapper").hide(); } $("#tool").click(function() { $(".chelp").slideToggle(); $("wrapper").animate({ opacity: 1.0 },200).slideToggle(200, function() { $("#tool img").toggle(); setCookie('state','hidden',365); }); });