设置 cookie 以在单击按钮时隐藏 div

我正在尝试显示默认显示的 div（包含条款和条件），除非设置 cookie 来隐藏它。

我已将我的代码添加到此处JSFiddle http://jsfiddle.net/v6ddf/

有什么想法为什么我的代码不起作用吗？

JavaScript

    function TermsAndConditions(){
   days=30;
   myDate = new Date();
   myDate.setTime(myDate.getTime()+(days*24*60*60*1000));
   document.cookie = 'TermsAndConditions=Accepted; expires=' + myDate.toGMTString();
}
if ($.cookie("TermsAndConditions") !== Accepted)
{
    $("#terms-and-conditions").hide();
} 

HTML

  <h1>Terms and Conditions</h1>
    <p>Example Content</p>

  <span class="accept-button"><a href="#" onclick="TermsAndConditions()">Accept</a></span></div

>

你的剧本发生了很多事情。

马克让你有了正确的开始：不引用Accepted不会让 JavaScript 高兴；字符串文字必须有引号。

其次，您的 jsFiddle 没有链接 jQuery。在屏幕左侧的“框架和扩展”下，确保您选择了 jQuery 的版本。

第三，jQuery没有内置的$.cookie方法;有一些扩展可以提供这一点，但它不是默认的 jQuery。如果您使用 jQuery 插件，您是否也会使用它来设置 cookie？相反，您可以使用本机浏览器扩展来设置 cookie。

第四，由于 jsFiddle 的工作方式，如果不进行一些操作，您就无法从 HTML 中调用 JavaScript 方法。最好在 JavaScript 中附加适当的功能。

因此，要获取 cookie，您可以这样做：

var cookie = document.cookie.split(';')
    .map(function(x){ return x.trim().split('='); })
    .filter(function(x){ return x[0]==='TermsAndConditions'; })
    .pop();

如果 cookie 存在，它将是一个键/值数组。然后您可以检查以确保它存在并包含您要查找的值：

if(cookie && cookie[1]==='Accepted') {
    $("#terms-and-conditions").hide();
}

然后我们将点击功能从 HTML 移至 JavaScript 中：

$('.accept-button a').on('click', function(){
    TermsAndConditions();
    return false;
}); 

这是一个适合您的 jsFiddle：http://jsfiddle.net/3d928/1/ http://jsfiddle.net/3d928/1/

请注意，在您原来的示例中，您没有隐藏#terms-and-conditions用户单击链接时的元素；您所做的只是设置 cookie。因此，在用户重新加载页面之前，它不会被隐藏。如果您想同时执行这两种操作，只需将元素隐藏在单击处理程序中即可：

$('.accept-button a').on('click', function(){
    TermsAndConditions();                   // set cookie
    $("#terms-and-conditions").hide();      // hide element
    return false;
});