0

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

任何帮助将不胜感激。！

4

2 回答 2

0

在显示或隐藏 div 之前检查 cookie。在此代码段中，id="moreButton"（不是实际按钮）的 div 具有显示和隐藏 id="moreOptions" 的 div 的文字“更多”或“Less”：

$(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: '/' })                     
        };                                                              
    });                                                                     


}                                                                               
                  );
于 2012-06-26T18:00:09.133 回答
0

您是否包含了对 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”

于 2012-06-26T18:00:49.167 回答