在创建cookie javascript时遇到问题

时间:2015-04-10 17:30:11

标签: javascript jquery html cookies

目前,我有一个复选框,一旦有人点击该复选框,复选框和标签都会消失,一些内容将取代它。我目前无法弄清楚如何完成设置,以便如果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是否存在。

1 个答案:

答案 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