目前,我有一个复选框,一旦有人点击该复选框,复选框和标签都会消失,一些内容将取代它。我目前无法弄清楚如何完成设置,以便如果cookie确实存在,它将隐藏复选框。如果cookie不存在,它将显示复选框,点击后会记住用户30天的选择。
这是Javascript:
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function eraseCookie(name) {
createCookie(name,"",-1);
}
createCookie('distributorcheckbox','cookie',30);
var x = readCookie('distributorcheckbox')
if (x) {
$(document).ready(function () {
$("label").addClass("important");
$('input[type="checkbox"][value="red"]').hide( "fast", function() {
$(".red").show();
$(this).closest('label').hide()
});
});
}
else {
$(document).ready(function () {
$('input[type="checkbox"][value="red"]').click(function () {
$(".red").show();
$(this).closest('label').hide()
});
});
}
这是html:
<div>
<label><input name="colorCheckbox" type="checkbox" value="red" />testing</label></div>
<div class="red box">
test
</div>
这是指向JSFiddle的链接:http://jsfiddle.net/zs1sn362/7/
更新:我相信我已经让cookie工作了,但现在复选框并没有显示cookie是否存在。
答案 0 :(得分:0)
您在执行任何操作之前创建了Cookie。这将显示复选框,直到单击它。
JS:
function createCookie(name, value, days) {
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
var expires = "; expires=" + date.toGMTString();
} else var expires = "";
document.cookie = name + "=" + value + expires + "; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
function eraseCookie(name) {
createCookie(name, "", -1);
}
var x = readCookie('distributorcheckbox');
console.log(x);
if (x) {
$(document).ready(function () {
$("label").addClass("important");
$('input[type="checkbox"][value="red"]').hide("fast", function () {
$(".red").show();
$(this).closest('label').hide()
});
});
} else {
$(document).ready(function () {
$('input[type="checkbox"][value="red"]').click(function () {
createCookie('distributorcheckbox', 'cookie', 30);
$(".red").show();
$(this).closest('label').hide()
});
});
}
DEMO: JSFiddle