jQueryのトグルクッキー機能

ここでは簡単なトグル(ボタンスイッチ)機能がありますが、ユーザーがボタンをクリックしたときにクッキーを追加する方法や位置を覚える方法はわかりません。

誰でもここにクッキーを追加できますか?

$(document).ready(function(){ 
 $("a.switch_thumb").toggle(function(){
  $(this).addClass("swap"); 
  $("ul.display").fadeOut(100, function() {
  $(this).fadeIn(100).addClass("thumb_view"); 
     });
  },

function() {
 $(this).removeClass("swap");
 $("ul.display").fadeOut(100, function() {
 $(this).fadeIn(110).removeClass("thumb_view");
    });

}); 
});
1
追加された 編集された
ビュー: 4
OPは、ユーザーがページを再び訪れたときに「ビュー」を記憶したい
追加された 著者 isJustMe,
PPKのクッキーに関する記事をご覧ください。うまくいけば助けになるほどの情報になるはずです。
追加された 著者 Ryan Kinal,
何のためにそこにクッキーが必要ですか?
追加された 著者 noob,

2 答え

このプラグインをチェックしてください https://github.com/carhartl/jquery-cookie は非常に簡単ですが、それを含めると、次のようなフラグを追加することができます

$.cookie('cookie_button', 'pressed'); //when pressed or
$.cookie('cookie_button', 'not_pressed'); //if is the case

その後、ページをロードするときにCookieの値をチェックして、ユーザーが最後に選択したもの

これをウルヘッドに追加する

<script>
/**
* jQuery Cookie plugin
*
* Copyright (c) 2010 Klaus Hartl (stilbuero.de)
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
*/
jQuery.cookie = function (key, value, options) {

   //key and at least value given, set cookie...
    if (arguments.length > 1 && String(value) !== "[object Object]") {
        options = jQuery.extend({}, options);

        if (value === null || value === undefined) {
            options.expires = -1;
        }

        if (typeof options.expires === 'number') {
            var days = options.expires, t = options.expires = new Date();
            t.setDate(t.getDate() + days);
        }

        value = String(value);

        return (document.cookie = [
            encodeURIComponent(key), '=',
            options.raw ? value : encodeURIComponent(value),
            options.expires ? '; expires=' + options.expires.toUTCString() : '',//use expires attribute, max-age is not supported by IE
            options.path ? '; path=' + options.path : '',
            options.domain ? '; domain=' + options.domain : '',
            options.secure ? '; secure' : ''
        ].join(''));
    }

   //key and possibly options given, get cookie...
    options = value || {};
    var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
    return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};
</script>
<script type="text/javascript">
$(document).ready(function(){


    if($.cookie("button")=="thumb_view"){
    $('ul.display').addClass($.cookie("button"));
    $("a.switch_thumb").addClass("swap");

    }else{
    $('ul.display').removeClass($.cookie("button"));
    $("a.switch_thumb").removeClass("swap");

    }



    $("a.switch_thumb").toggle(function(){

      $(this).addClass("swap"); 
      $("ul.display").fadeOut("fast", function() {
        $(this).fadeIn("fast").addClass("thumb_view");          
         });
      $.cookie("button", "thumb_view");  

      }, function() {
      $.cookie("button", "not_thumb_view");
      $(this).removeClass("swap");
      $("ul.display").fadeOut("fast", function() {
        $(this).fadeIn("fast").removeClass("thumb_view");

        }); 
      $.cookie("button", "not_thumb_view");

    }); 




});
</script>
1
追加された
私は試してみるが、これを作る方法を理解できない:(
追加された 著者 user994461,
はい、これは動作しますが、これを追加するには問題があります。スクリプトをチェックしてください。 pastebin.com/eNUvWs4R とここでクッキーを試してみると、時にはボタンを2回クリックしてビューを変更する必要があります
追加された 著者 user994461,
編集を試して私たちに知らせてください
追加された 著者 isJustMe,

これはどうですか?これは、ユーザーがボタンを偶数回または奇数回クリックしたかどうかに応じて、button_cookieを値1または0に設定します

$(document).ready(function(){ 
    $("a.switch_thumb").toggle(
        function(){
            $(this).addClass("swap"); 
            $("ul.display").fadeOut(100, function() {
                $(this).fadeIn(100).addClass("thumb_view"); 
            });
            setCookie('button_pressed',!$(this).hasClass("swap"));
        },
        function() {
            $(this).removeClass("swap");
            $("ul.display").fadeOut(100, function() {
                $(this).fadeIn(110).removeClass("thumb_view");
            });
            setCookie('button_pressed',$(this).hasClass("swap"));
        }
    ); 
});

/**
 * implementation of setCookie function
 * this function creates only session cookie, can be amended so to use expires param
 */
function setCookie(name, value){
    document.cookie=name+'='+value;
}
0
追加された
私は試してみませんか?ここで働かないでくださいデモは何ですか? sohtanaka.com/web- design/examples/display-switch ので、私のページにこのようなものを作成しますが、今は単にクッキーを設定するだけです
追加された 著者 user994461,
あなたが提供したページは、全くクッキーを使用しません。
追加された 著者 Marian Bazalik,