jquery cookie 设置答案

【问题标题】：jquery cookie setupjquery cookie 设置
【发布时间】：2012-06-27 05:32:55
【问题描述】：

我是 jquery 的新手。我一直在研究如何使用 cookie 插件为 jquery 函数设置 cookie。

我有这个简单的 div 隐藏和显示功能，但希望类状态在链接到其他页面并刷新后保持不变。

JS 是这样的

<script type="text/javascript">

$(document).ready(function(){

    $("div.toggle_search").hide();
    $("h2.trigger_up").click(function() {
    $(this).toggleClass("active").prev().slideToggle(250);
      if ($.cookie('more_search','1')) {
        $("#criteria").attr('class', $.cookie('more_search'));
    } else {
        $("#criteria").attr('class', 'active');
    }
    $.cookie('more_search', $(".trigger_up").attr('class'));
            return false;
    });

});

</script>

HTML

<div id="criteria">
    <div class="toggle_search">    
        <div class='left'>
            Stuff goes here
        </div>
    </div>
    <h2 class="trigger_up"><a href="#">See More Search Criteria</a></h2>

    <div class="clear"></div>
</div>

任何帮助将不胜感激。！

【问题讨论】：

感谢您的回复。但我决定选择第二种选择并重新开始。谢谢！

标签： jquery-cookie

【解决方案1】：

在显示或隐藏 div 之前检查 cookie。在这个 sn-p 中，id="moreButton" 的 div（不是实际的按钮）有文字说“更多”或“更少”，用于显示和隐藏 id="moreOptions" 的 div：

$(document).ready(function() {                                                  
    if ($.cookie("show") == "show") {                                       
        $("#moreButton").html("Less «");                                
        $("#moreButton").attr("title", "Hide the extra search parameters.");
        $("#moreOptions").show();                                       
    }                                                                       
    else {                                                                  
        $("#moreButton").html("More »");                                
        $("#moreButton").attr("title", "See more search options.");     
    }                                                                       

    $("#moreButton").click(function() {                                     
        $("#moreOptions").animate({ "height": "toggle" }, { duration: 60 });
        if ($("#moreButton").html() == "More »") {                      
            $("#moreButton").html("Less «");                        
            $("#moreButton").attr("title", "Hide the extra search parameters.");
            $.cookie("show", "show", { path: '/' })                 
        }                                                               
        else {                                                          
            $("#moreButton").html("More »");                        
            $("#moreButton").attr("title", "See more search options.");
            $.cookie("show", "", { path: '/' })                     
        };                                                              
    });                                                                     


}                                                                               
                  );

【讨论】：

非常感谢！我用了这个，它正在工作。我仍在考虑将方向图标添加到 html 字符串中。我尝试了几件事，但有点失败。
对不起，我提前关闭了。我正在查看api.jquery.com/html 以了解如何添加图像。这是一个看的好地方吗？再次感谢！
@Lpillory 是的，您可以使用该 jquery 方法设置 innerHtml，例如将其设置为包含标记的内容。如果您对此还有任何疑问，应该提出一个新问题。

【解决方案2】：

您是否包含了对 jQuery-cookie 库的引用？

请参阅您正在使用或尝试使用的插件页面上的文档，https://github.com/carhartl/jquery-cookie/

通过将 cookie 设置为将来过期，它应该会一直持续到过期日期。

例如：$.cookie('more_search', $(".trigger_up").attr('class'), { expires: 7 }); //一周后过期。

还请注意，当您获得 $(".trigger_up").attr('class') trigger_up 和 active（第一次单击链接时）时，您有两个类，您可能需要解析 cookie 值设置为“active”

【讨论】：