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

以下是我的Jquery：

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

单击

#工具img

#包装

与

.chelp

一起隐藏

我需要用cookie来控制这一点，因此当用户隐藏包装时，它在所有页面上保持隐藏状态，或者当他们重新访问页面时

我知道有一个jQueryCookie插件，但我希望使用普通Javascript来实现这一点，而不是包含另一个插件

---

有谁能告诉我如何在纯javascript中构建它并与JQuery合并以创建cookie，然后在每次加载页面时检查cookie，看看是否应该隐藏或显示包装器？

如果您想编写纯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);
    });
 });

---

您可以使用document.cookie在javascript中设置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();
        });
    }
});

祝你好运

文件足够轻，您无需创建新文件，只需将其插入主javascript文件即可。我已经这样做了，效果很好

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

更新

下面是一些基本的jQuery，可以用来测试和设置cookie

    if ( $.cookie("hide-alert") == "true" ) {
        $("#legal-alert").hide();
    }
    $("#legal-alert").append("<div class='close-alert' title='Close'>x</div>");
    $(".close-alert").live("click", function() {
        $(this).parent(".alert").slideUp();
        $.cookie("hide-alert", "true", { expires: 365 });
    });

if（$.cookie（“隐藏警报”）=“true”）{
$（“#法律警报”）.hide（）；
}
$（“#法律警报”）。附加（“x”）；
$（“.close alert”）.live（“单击”，函数（）{
$（this.parent（“.alert”）.slideUp（）；
$.cookie（“隐藏警报”、“真实”、{expires:365}）；
});

---

您需要的所有文档都在插件本身中（我删除了它，以使其足够小，可以直接放入我的js文件中）。显然，您可以更改“expires”等。请注意，上面的代码设置了一个按钮来关闭/隐藏该框，然后为onClick设置了一个实时侦听器，这就是隐藏您要隐藏的框的地方（我在上面称它为“#法律警报”）。

当您（显然）使用一个插件时，为什么要避免另一个插件？您的if语句缺少一个右括号。