使用Cookie的jQuery切换功能

Question

使用Cookie的jQuery切换功能

3

我有以下切换系统，但我希望它能使用jQuery cookie插件来记住打开/关闭的内容。例如，如果我打开一个切换并离开页面，当我回来时，它应该仍然是打开状态。默认情况下，所有切换都应该关闭。

这是我目前的代码，但它变得相当混乱，需要一些帮助，谢谢。

jQuery.cookie = function (name, value, options) { if (typeof value != 'undefined') { options = options || {}; if (value === null) { value = ''; options = $.extend({}, options); options.expires = -1; } var expires = ''; if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) { var date; if (typeof options.expires == 'number') { date = new Date(); date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000)); } else { date = options.expires; } expires = '; expires=' + date.toUTCString(); } var path = options.path ? '; path=' + (options.path) : ''; var domain = options.domain ? '; domain=' + (options.domain) : ''; var secure = options.secure ? '; secure' : ''; document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join(''); } else { var cookieValue = null; if (document.cookie && document.cookie != '') { var cookies = document.cookie.split(';'); for (var i = 0; i < cookies.length; i++) { var cookie = jQuery.trim(cookies[i]); if (cookie.substring(0, name.length + 1) == (name + '=')) { cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); break; } } } return cookieValue; } };
        // var showTop = $.cookie('showTop');
        if ($.cookie('showTop') == 'collapsed') {

            $(".toggle_container").hide();
            $(".trigger").toggle(function () {
                $(this).addClass("active");
            }, function () {
                $(this).removeClass("active");
            });
            $(".trigger").click(function () {
                $(this).next(".toggle_container").slideToggle("slow,");
            });
        } else {

            $(".toggle_container").show();
            $(".trigger").toggle(function () {
                $(this).addClass("active");
            }, function () {
                $(this).removeClass("active");
            });
            $(".trigger").click(function () {
                $(this).next(".toggle_container").slideToggle("slow,");
            });
        };

        $(".trigger").click(function () {
            if ($(".toggle_container").is(":hidden")) {
                $(this).next(".toggle_container").slideToggle("slow,");
                $.cookie('showTop', 'expanded');
            } else {
                $(this).next(".toggle_container").slideToggle("slow,");
                $.cookie('showTop', 'collapsed');
            }

            return false;

        });

以下是与之配合使用的 HTML 片段：

<li> 
                                        <label for="small"><input type="checkbox" id="small" /> Small</label> 
                                        <a class="trigger" href="#">Toggle</a>  
                                        <div class="toggle_container"> 
                                            <p class="funding"><strong>Funding</strong></p> 
                                            <ul class="childs"> 
                                                <li class="child"> 
                                                    <label for="fully-funded1"><input type="checkbox" id="fully-funded1" /> Fully Funded</label> 
                                                    <a class="trigger" href="#">Toggle</a> 
                                                    <div class="toggle_container"> 
                                                        <p class="days"><strong>Days</strong></p> 
                                                        <ul class="days clearfix"> 
                                                            <li><label for="1pre16">Pre 16</label> <input type="text" id="1pre16" /></li> 
                                                            <li><label for="2post16">Post 16</label> <input type="text" id="2post16" /></li> 
                                                            <li><label for="3teacher">Teacher</label> <input type="text" id="3teacher" /></li> 
                                                        </ul> 
                                                    </div> 
                                                </li>

- Cameron

@Cameron - 根据您的评论，您很可能有一个语法错误阻止所有代码运行并抛出错误，请尽可能使用Firebug检查此问题。 - Nick Craver

2个回答

1

好的，这是我现在的代码：

被注释掉的部分可以正常工作，但无法与唯一的ID进行通信。上面的代码则无法运行。

$(document).ready(function () {

        $(".toggle_container").each(function() {
            $(this).toggle($.cookie('show-' + this.id) != 'collapsed');
        });

        $(".trigger").click(function () {
            var tc = $(this).toggleClass("active").next(".toggle_container").slideToggle("slow", function() {
                $.cookie('show-' + $(this).attr("id"), $(this).is(":hidden") ? 'collapsed' : 'expanded');        
            });
            return false;
        });

        //$(".toggle_container").toggle($.cookie('showTop') != 'collapsed');

        /*$(".trigger").click(function () {
            $(this).toggleClass("active").next(".toggle_container").slideToggle("slow,");
            $.cookie('showTop',
            $(".toggle_container").is(":hidden") ? 'expanded' : 'collapsed');
            return false;
        });*/

    });

这是 HTML 代码

                            <li> 
                    <input id="MC_ctl00_RPS_chkItem_1" type="checkbox" name="ctl00$MC$ctl00$RPS$ctl01$chkItem" /> 
                    <label for="MC_ctl00_RPS_chkItem_1" id="MC_ctl00_RPS_lbl_1">Medium</label> 
                    <a class="trigger" href="#">Toggle</a>  
                    <div class="toggle_container" id="divFund"> 
                        <p class="funding"><strong>Funding</strong></p> 
                        <ul class="childs"> 

                                <li class="child"> 
                                    <input id="MC_ctl00_RPS_RPF_1_chkItem_0" type="checkbox" name="ctl00$MC$ctl00$RPS$ctl01$RPF$ctl00$chkItem" /> 
                                    <label for="MC_ctl00_RPS_RPF_1_chkItem_0" id="MC_ctl00_RPS_RPF_1_lbl_0">Fully Funded</label> 
                                    <a class="trigger" href="#">Toggle</a> 
                                    <div class="toggle_container" id="divDays"> 
                                        <p class="days"><strong>Days</strong></p> 
                                        <ul class="days clearfix"> 
                                            <li> 
                                                <label for="MC_ctl00_RPS_RPF_1_txtPre16_0" id="MC_ctl00_RPS_RPF_1_lblPre16_0">Pre 16</label> 
                                                <input name="ctl00$MC$ctl00$RPS$ctl01$RPF$ctl00$txtPre16" type="text" id="MC_ctl00_RPS_RPF_1_txtPre16_0" /> 
                                            </li> 
                                            <li> 
                                                <label for="MC_ctl00_RPS_RPF_1_txtPost16_0" id="MC_ctl00_RPS_RPF_1_Label1_0">Post 16</label> 
                                                <input name="ctl00$MC$ctl00$RPS$ctl01$RPF$ctl00$txtPost16" type="text" id="MC_ctl00_RPS_RPF_1_txtPost16_0" /> 
                                            </li> 
                                            <li> 
                                                <label for="MC_ctl00_RPS_RPF_1_txtTeacher_0" id="MC_ctl00_RPS_RPF_1_Label2_0">Teacher</label> 
                                                <input name="ctl00$MC$ctl00$RPS$ctl01$RPF$ctl00$txtTeacher" type="text" id="MC_ctl00_RPS_RPF_1_txtTeacher_0" /> 
                                            </li> 

                                        </ul> 
                                    </div> 
                                </li>

- Cameron

@Cameron - 请登录并编辑您的原始问题，这样会使事情变得混乱。这段JavaScript和代码是有效的，请在此处进行测试：http://jsfiddle.net/a33rV/1/。您的问题出在其他地方... - Nick Craver

抱歉，我不能。因为原始的问题没有登录 :/ 在选择ID之前的其他代码是有效的，所以我看不出其他地方的问题会导致它。 - Cameron

你点击了我评论中的链接吗？那是准确的 HTML 和 JavaScript 在工作...问题出在其他地方。 - Nick Craver

是的，我已经尝试添加了代码，并且在测试中它可以工作。但是由于某种原因，在我的网站上它不起作用？然而，您提供的先前代码确实有效。因此，破坏它的是新添加的内容（可能与其他内容冲突，但我不知道是什么）。 - Cameron

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nick Craver · Accepted Answer

您可以将所有的代码缩短到这个程度，这样应该会更简单：

$(".toggle_container").toggle($.cookie('showTop') != 'collapsed');

$(".trigger").click(function () {
    $(this).toggleClass("active").next(".toggle_container").slideToggle("slow,");
    $.cookie('showTop', 
                $(".toggle_container").is(":hidden") ? 'expanded' : 'collapsed');
    return false;
});

这里提供一种方法，为每个容器设置一个cookie，只需要给每个.toggle_container分配一个唯一的ID：

$(".toggle_container").each(function() {
    $(this).toggle($.cookie('show-' + this.id) != 'collapsed');
});

$(".trigger").click(function () {
    var tc = $(this).toggleClass("active").next(".toggle_container").slideToggle("slow", function() {
        $.cookie('show-' + $(this).attr("id"), $(this).is(":hidden") ? 'collapsed' : 'expanded');        
    });
    return false;
});