使用jQuery Cookie保存div切换状态 [英] Save div toggle state with jquery cookie

问题描述

我对如何实现这个想法有所了解，但似乎在所有类似的帖子中，没有人能举一个简单的例子.我只想在Cookie中存储"marketing-message-global"的切换状态值.如果用户单击"hide-marketing-message-btn"，则切换状态将存储在cookie中.当用户刷新页面时，将使用存储的切换状态，并隐藏已关闭的div.

I have an idea how to implement this, but it doesn't seem that of all the similar posts, anybody is able to give a simple example. I want to simply store the value of the toggle state of "marketing-message-global" in a cookie. If the user clicks "hide-marketing-message-btn", the toggled state will be stored in a cookie. When the user refreshes the page, the stored toggle state will be used, and hide the div that was toggled off.

<div id="marketing-message-global">
</div>
<div id="hide-marketing-message-btn">
</div>

$(document).ready(function() {
 if $('#hide-marketing-message-btn").clicked()
 {
    $("#marketing-message-global").hide();
    $.cookie("toggle-state") == true;
 }

if ($.cookie("toggle-state") == true)
{
    $("#marketing-message-global").hide();
}
else if ($.cookie("toggle-state") == false)
{
$("#marketing-message-global").show();
}
 });
</script>

推荐答案

我使用了jQuery cookie插件( https: //github.com/carhartl/jquery-cookie )

I used jquery cookie plugin (https://github.com/carhartl/jquery-cookie)

    $(function(){
       if($.cookie){
           //By default, if no cookie, just display.
           $("#marketing-message-global").toggle(!(!!$.cookie("toggle-state")) || $.cookie("toggle-state") === 'true');
    }

    $('#hide-marketing-message-btn').on('click', function(){
        $("#marketing-message-global").toggle();
        //Save the value to the cookie for 1 day; and cookie domain is whole site, if ignore "path", it will save this cookie for current page only;
        $.cookie("toggle-state", $("#marketing-message-global").is(':visible'), {expires: 1, path:'/'}); 
});

});

这篇关于使用jQuery Cookie保存div切换状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！