设置cookie以在单击按钮时隐藏div [英] Set cookie to hide div when button is clicked

问题描述

我正在尝试显示一个div(包含条款和条件)，除非已将cookie设置为隐藏它，否则默认情况下会显示该div.

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

我已将我的代码添加到 JSFiddle

I have added my code here to a JSFiddle

有什么想法为什么我的代码无法正常工作?

Any ideas why my code isn't working?

JavaScript

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

>

推荐答案

实际上，您的脚本有很多错误.

There's a lot wrong with your script, actually.

Mark让您步入正确的开始:不引用Accepted不会使JavaScript开心；字符串文字必须带引号.

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

第二，您的jsFiddle无法链接jQuery.在屏幕左侧的框架和扩展"下，确保您选择了jQuery版本.

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.

第三，jQuery没有内置的$.cookie方法.有提供此功能的扩展程序，但它不是默认的jQuery.而且，如果您使用的是jQuery插件，您是否也不会使用它来设置Cookie?相反，您使用本机浏览器扩展来设置cookie.

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.

第四，由于jsFiddle的工作方式，如果没有体操，就无法从HTML内调用JavaScript方法.最好在JavaScript中附加适当的功能.

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.

因此，要获取Cookie，您可以执行以下操作:

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

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

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

然后，我们将点击功能移出HTML并移入JavaScript:

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

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

这是为您工作的jsFiddle: http://jsfiddle.net/3d928/1/

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

请注意，在您的原始示例中，用户单击链接时并未隐藏#terms-and-conditions元素.您要做的就是设置cookie.因此，直到用户重新加载页面后，它才会被隐藏.如果您想两者都做，只需将元素也隐藏在点击处理程序中即可:

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

这篇关于设置cookie以在单击按钮时隐藏div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！