使用 jQuery cookie 显示/隐藏答案

【问题标题】：Show/hide using jQuery cookies使用 jQuery cookie 显示/隐藏
【发布时间】：2011-06-29 11:44:56
【问题描述】：

所以我创建了一个简单的提示框，它会在页面加载时淡入，并带有关闭框的选项。如果访问者单击关闭链接，我正在尝试隐藏该框。我对 cookie 很陌生，所以我可能做错了，但这就是我所拥有的：

    $('#close').click(function(e) {
        jQuery.cookie('tip', 'hide', cookieOpts);
        $(this).parent('div.tip').fadeOut(1000);
        e.preventDefault();
    });

    jQuery.cookie('tip', 'show', cookieOpts);

    $('.tip').delay(500).fadeIn(1000);

    var shouldShow = jQuery.cookie('tip') == 'show';
    var cookieOpts = {expires: 7, path: '/'};

    if( shouldShow ) { 
        $('.tip').delay(500).fadeIn(1000); 
    }
    else {            
        $('.tip').css('display', 'none');
    }

【问题讨论】：

您是否包含了 cookie JavaScript 文件？
是的，我已经包含了 cookie 文件。只是不明白为什么它不起作用。 ://

标签： jquery cookies

【解决方案1】：

我修改了代码：

http://jsbin.com/ujixi4/4/edit

简单一点，希望能达到你想要的。

var cookieOpts = {expires: 7, path: '/'};  //this isnt working for some reason
alert('c: '+$.cookie('tip')); //debug code

if( $.cookie('tip') == 'hide'){
  //do nothing
}else{
  $('.tip').delay(500).fadeIn(1000); 
  //$.cookie('tip', 'hide', {expires: 7, path: '/'}); // Add this if you want the cookie to disappear on reload (even if they don't click)
}

$('#close').click(function(e) {
  $.cookie('tip', 'hide', {expires: 7, path: '/'});
  $('.tip').hide();  
});

这是一个使用 cookie 的类似遮阳篷： jquery change font-size based on cookie?

http://jsbin.com/ufetu5/2/edit

【讨论】：

褪色有效，我希望在用户再次访问时不显示提示。我没有得到那种效果。
不确定它是否正常工作。即使在重新加载页面后，警报也会显示为空。嗯
所以你想让它在重新加载时消失，即使他们没有按下关闭按钮？我已将其添加到（请参阅评论）。
不完全是。我的计划是让它只在点击时消失，否则它会保留在那里。
好吧，问题出在 cookieOpts 上——它以某种方式破坏了它。这个有效 - jsbin.com/ujixi4/6

【解决方案2】：

你传入cookieOpts，但变量是在它下面定义的。

将它上移到最先被引用的位置。

【讨论】：

我移动了上面的变量，但它仍然没有按照我的意愿做。我不确定我做错了什么。