jQuery-切换元素并用cookie保存

jQuery - Toggle element and save it with cookie

本文关键字：cookie 保存 元素 jQuery-      更新时间：2023-09-26

我正在尝试使用jQuery Cookie插件和jQuery切换函数：

每当有人切换#launchpad,时，我都想得到它的当前状态。

例如，如果有人切换它，它变成隐藏的，我想提醒它现在是隐藏的，反之亦然。

这是我当前的代码：

jQuery:

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

                $("#launchpad").toggle(
                    if($(this).is(":visible")){
                        alert("visible!!");
                    }else{
                        alert("not visible");
                    }
                );
                //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", $("#launchpad").is(':visible'), {expires: 1, path:'/'}); 
            });
        });

HTML:

 <div id="launchpad">
            <div id="toggle-launchpad" title="Toggle Launchpad" style="display: ;">
                <i class="fa fa-plus"></i>
            </div>
            </div>

我想我不能在toggle function中使用if function。有人能解决我的问题吗？

如果你这样做：

$("#launchpad").toggle(400, function() {
    if($(this).is(":visible")){
        alert("visible!!");
    }else{
        alert("not visible");
    }
});

该代码将在CCD_ 4功能完成时执行。请注意，toggle函数是异步的，因此您的$.cookie调用可能会在div隐藏/显示之前被调用。尝试：

$("#launchpad").toggle(400, function() {
    $.cookie("toggle-state", $("#launchpad").is(':visible'), {expires: 1, path:'/'});
});

并不是说400是动画以毫秒为单位的（默认）时间。请参阅文档。

编辑：如果你的评论是关于你代码的第一部分，我会把它写为：

if ($.cookie && $.cookie("toggle-state")) && $.cookie("toggle-state") === 'false') {
     $("#launchpad").hide();
}

这假设div在默认情况下是可见的（即不被CSS隐藏）

相关文章：