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

Question

I'm trying to display a div (containing terms and conditions) which is shown by default unless a cookie is set to hide it.

I have added my code here to a JSFiddle

Any ideas why my code isn't working?

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

There's a lot going on with your script.

Mark's got you on the right start: not quoting Accepted is not going to make JavaScript happy; string literals have to have quotes.

Secondly, your jsFiddle doesn't link jQuery in. On the left side of the screen, under "Frameworks & Extensions", make sure you've chosen a version of jQuery.

Thirdly, jQuery doesn't have a built-in $.cookie method; there are extensions that provide that, but it's not default jQuery. And if you were using a jQuery plugin, wouldn't you use that to set the cookie too? Instead you use native browser extensions to set the cookie.

Fourthly, because of the way jsFiddle works, you can't invoke JavaScript methods from within the HTML without some gymnastics. Much better to attach the appropriate functionality all within the JavaScript.

So, to get your cookie, you can do this:

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

If the cookie exists, it will be a key/value array. Then you can check to make sure it exists and contains the value you're looking for:

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

Then we'll move the click functionality out of the HTML and into the JavaScript:

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

Here's a working jsFiddle for you: http://jsfiddle.net/3d928/1/

Note that in your original example, you aren't hiding the #terms-and-conditions element when the user clicks the link; all you're doing is setting the cookie. So it won't be hidden until the user re-loads the page. If you want to do both, simply hide the element in the click handler as well:

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

Answer 2

Check this out : 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();
    } 
}

Maybe you forget to include 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

There are a couple things to consider:

1. You should have quotes around Accepted in the if statement.
2. You should use the === comparison, not !== .