Question

我是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>

非常感谢任何帮助。！

Answer 1

在显示或隐藏div之前检查cookie。在此代码段中，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: '/' })                     
        };                                                              
    });                                                                     


}                                                                               
                  );

Answer 2

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

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

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

Ex：$.cookie('more_search', $(".trigger_up").attr('class'), { expires: 7 }); //将在一周内过期。

另请注意，当$(".trigger_up").attr('class') trigger_up并且处于活动状态时（第一次单击链接时），您有两个类，您可能想要解析cookie值设置为“active”

jquery cookie设置

2 个答案: