1

サイトに追加したい小さなドロップ ダウン メッセージがあります。次のコードを使用します。

<script>$(document).ready(function(){
$('#someid1') .slideDown('slow');}); $(document).ready(function() $('#hide').click(function(){
 $('#someid1').slideUp('slow'); });});</script>


<div id="someid1"><div id="someid2">some gibberish <a id="hide" href="#">HERE</a></div></div>

ユーザーがここをクリックして非表示にしたときに、この選択を覚えておきます。問題は、これを行うにはおそらくCookieが必要であることを知っていますが、それらについての手がかりがありません。

前もって感謝します アッシュ

4

2 に答える 2

3

この jQuery プラグインをお試しください: https://github.com/carhartl/jquery-cookieこれは、Cookie の読み取り、書き込み、および削除のためのシンプルで軽量な jQuery プラグインです。

簡単にCookieを作成できます

$.cookie('the_cookie', 'the_value');

そしてクッキーを読む

$.cookie('the_cookie'); // => 'the_value'

だから頼むって…

if ($.cookie('the_cookie') === 'the_value') {
    $('#someid1').addClass('open');
}

CSS

#someid1 {
    display:none;
}

#someid1.open {
    display:block
}

実装例

<!DOCTYPE HTML>
<html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <title></title>

        <!-- Get jQuery Core -->
        <script src="/path/to/jquery.js" type="text/javascript"></script>

        <!-- Get Cookie Plugin -->
        <script src="/path/to/jquery.cookie.js" type="text/javascript"></script>


        <script type="text/javascript">

            // Is DOM ready?
            $(document).ready(function() {

                $('#hide').click(function(e){

                    // Set Cookie named 'notification'to the value 'hide'
                    $.cookie('notification', 'hide'); 

                    // Hide your Div
                    $('#someid1').slideUp('slow');

                    // Disable default behavior
                    e.preventDefault();
                });

                // Hide DIV is Cookie is Set
                if( $.cookie('notification') === 'hide' ){
                    $('#someid1').hide();
                }

            });
        </script>

    </head>
    <body>
        <div id="someid1">

            <div id="someid2">some gibberish</div>
            <a id="hide" href="#">HERE</a>

        </div>
    </body>
</html>

注:このコードはテストされていないため、機能しない可能性があります。しかし、それは正しい方向へのヒントを与えてくれます。

于 2012-06-01T13:37:27.980 に答える
2

必ずしも Cookie を使用する必要はありません。ブラウザのローカル ストレージをカプセル化するstore.jsと、クライアント側にデータを保存する他のいくつかの方法を使用して、データの保存を試すことができます。

/*
store.js groups your values into something called a store. Multiple stores are separated from each other.
So let's make a new store:
*/

var settings = new Store("settings");

/*
Just choose a name for the new store, and save it in a variable. Always remember to use the "new" keyword! Never leave it off!
Now you can almost normally get, set and remove values:
*/

settings.set("color", "blue");
settings.set("enable_test1", true);
settings.set("number_of_rainbows", 8);

// and

var color = settings.get("color");

// and

settings.remove("color");

...コードで編集..

 <div id="cookiemsg"><div id="cookiecenter"><p>This website places a
 Google Analytics cookie on your machine, this helps us collect
 anonymous information so that we can provide a better experiance for
 you. By using this site you imply your consent to this. For more
 information or to find out how you can remove this cookie please visit
 our privacy policy <a href="#">HERE</a> or if you are happy with this
 click <a id="hide" href="#">HERE</a></p></div><!--end of
 cookiecenter--></div><!--end of cookiemsg-->

</p> 

$(function(){
    var store = new Store("com.domain.page.store")
    var acceptedCookie = store.get("acceptedCookie");
    if(typeof acceptedCookie == "undefined"){
     //set a default
       acceptedCookie = false
     }
    if(!acceptedCookie){
        $('#cookiemsg').slideDown('slow');
    }

    $('#hide').click(function(){
         $('#cookiemsg').slideUp('slow');
         store.set("acceptedCookie", true);
   });

});
于 2012-06-01T14:46:08.203 に答える