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 を表示および非表示にするための「More」または「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 }); //1 週間で有効期限が切れます。

また、trigger_up と active を取得したとき (リンクが初めてクリックされたとき) に 2 つのクラスがあることに注意してください$(".trigger_up").attr('class')。Cookie の値が「active」に設定されていることを解析したい場合があります。

于 2012-06-26T18:00:49.167 に答える