Question

这是我的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

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

Answer 2

您可以使用document.cookie W3C rundown here在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();
        });
    }
});

祝你好运！

Answer 3

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

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

更新

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

    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 });
    });

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

根据Cookie值隐藏和显示内容

3 个答案: