我正在使用jquery.cookie在用户注册简报的模式中设置一个cookie。
我有两个Cookie场景 1)模态显示,用户可以勾选“不再显示”复选框。 Cookie需要设置为7天。或者用户点击普通的“关闭/ X”按钮
2)用户填写表格并完成注册过程。单击“完成”按钮时,cookie需要设置为365天。
我不想在表单提交上设置cookie,因为人们仍然可以放弃表单。
我设法让复选框cookie工作但不是按钮cookie。两者都需要首先检查cookie是否存在,如果没有设置cookie取决于采取的行动。
我做错了什么?
所以我拥有的是:
//The checkbox
<div class='modal-footer'>
<div class="checkbox pull-right">
<label for="modal-checkbox">dont show again</label>
<input class='modal-check' id="modal-checkbox" name='modal-check' type="checkbox">
</div>
</div>
//The button
<div class='modal-footer'>
<button type="submit" id="success--btn "class="btn btn-custom-2 btn-block" data-dismiss="modal" aria-label="Close">Finished!</button>
</div>
脚本
$(document).ready(function(){
var my_cookie = $.cookie($('.modal-check').attr('name'));
if (my_cookie && my_cookie == "true") {
$(this).prop('checked', my_cookie);
}
else{
setTimeout(function(){
$('#newsletter').modal('show');
}, secs);
}
$(".modal-check").change(function() {
$.cookie($(this).attr("name"), $(this).prop('checked'), {
path: '/',
expires: 7
});
});
$("#succes--btn").on("click", function () {
$.cookie('my_cookie', '1234', {
path: '/',
expires: 365
});
});
答案 0 :(得分:1)
首先,它可能只是复制问题,但你在按钮ID中有一个空格,而且默认的bootstrap click事件也可能导致你的事件没有被调用:
//The button
<div class='modal-footer'>
<button type="submit" id="success--btn" class="btn btn-custom-2 btn-block" aria-label="Close">Finished!</button>
</div>
JavaScript可以简化。你可以这样试试:
$(document).ready(function(){
//keep it simple, I suppose the cookie name will not change after all
var regNewsletterCookie = $.cookie('regNewsletter');
if (!regNewsletterCookie) {
//my_cookie undefined or my_cookie false ends here
setTimeout(function(){
$('#newsletter').modal('show');
}, secs);
}
$(".modal-check").change(function() {
$.cookie('regNewsletter', $(this).prop('checked'), {
path: '/',
expires: 7
});
//And there is also a typo in you selector succesS--btn
$("#success--btn").on("click", function () {
$.cookie('regNewsletter', true, {
path: '/',
expires: 365
});
$('#YourModalId').modal('hide');
});
});