Question

我试图显示默认显示的div（包含条款和条件），除非将Cookie设置为隐藏它。

我已将我的代码添加到JSFiddle

为什么我的代码不起作用的任何想法？

的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

>

Answer 1

实际上你的脚本有很多问题。

马克让你在正确的开始：不引用Accepted不会让JavaScript开心;字符串文字必须有引号。

其次，你的jsFiddle没有链接jQuery。在屏幕的左侧，在“Frameworks＆amp; Extensions”下，确保你选择了一个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/

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

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

Answer 2

检查出来：http://jsfiddle.net/bochzchan/fkFSZ/

function TermsAndConditions(){       
   days=30;
   myDate = new Date();
   myDate.setTime(myDate.getTime()+(days*24*60*60*1000));    
   document.cookie = 'TermsAndConditions=Accepted; expires=' + myDate.toGMTString();     
}

function CheckCookies(){   
    if ($.cookie("TermsAndConditions") === "Accepted")
    {
        $("#terms-and-conditions").hide();
    } 
}

也许你忘了包含jquery cookie js

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<div id="terms-and-conditions">
    <h1>Terms and Conditions</h1>
    <p>Example Content</p>  
    <span class="accept-button"><a href="#" onclick="TermsAndConditions()">Accept</a></span>    
</div>
<a href="#" onclick="CheckCookies()">Check</a>

Answer 3

有几件事需要考虑：

Accepted声明中的if附近应该有引号。
您应该使用===比较，而不是!==。

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

3 个答案: