[英]Set cookie to hide div when button is clicked
我正在尝试显示默认情况下显示的 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
>
你的脚本有很多事情要做。
Mark 为您提供了正确的开始:不引用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/
请注意,在您的原始示例中,当用户单击链接时,您并没有隐藏#terms-and-conditions
元素; 你所做的就是设置cookie。 所以它不会被隐藏,直到用户重新加载页面。 如果您想同时执行这两项操作,只需将元素隐藏在点击处理程序中:
$('.accept-button a').on('click', function(){
TermsAndConditions(); // set cookie
$("#terms-and-conditions").hide(); // hide element
return false;
});
看看这个: 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>
有几件事情需要考虑:
if
语句中对Accepted
引号。===
比较,而不是!==
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.