jQuery wisselen cookiefunctie

Ik heb hier een eenvoudige schakelaar (knopschakelaar), maar ik weet niet hoe ik een cookie moet toevoegen en hoe de positie te onthouden wanneer gebruikers op de knop klikken.

Kan iedereen mij helpen om hier een cookie toe te voegen?

$(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
OP wil het "beeld" onthouden wanneer een gebruiker de pagina opnieuw bezoekt
toegevoegd de auteur isJustMe, de bron
Zie PPK's artikel over cookies - het is hopelijk informatief genoeg om te helpen.
toegevoegd de auteur Ryan Kinal, de bron
Waar heb je daar een koekje voor nodig?
toegevoegd de auteur noob, de bron

2 antwoord

bekijk deze plug-in https://github.com/carhartl/jquery-cookie is heel eenvoudig, nadat je het hebt toegevoegd, kun je gewoon een vlag zoals toevoegen

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

Controleer vervolgens de cookiewaarde wanneer u de pagina laadt, zodat u de laatste selectie van gebruikers kunt onthouden

Voeg dit toe aan je hoofd

<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
toegevoegd
Ik probeer maar begrijp niet hoe dit te maken :(
toegevoegd de auteur user994461, de bron
Ja dit kan werken, maar ik heb problemen om dit toe te voegen, controleer mijn script .. pastebin.com/eNUvWs4R en wanneer imit cookie hier soms twee keer op knoppen moet klikken om van weergave te veranderen
toegevoegd de auteur user994461, de bron
probeer de bewerking en laat het ons weten
toegevoegd de auteur isJustMe, de bron

Hoe zit het met dit? Dit zet de button_cookie op waarde 1 of 0 afhankelijk van het feit of de gebruiker op de knop even of oneven keer heeft geklikt

$(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
toegevoegd
im probeer maar werk niet hier is demo wat ik nodig heb sohtanaka.com/web- ontwerp/voorbeelden/display-schakelaar dus ik maak op mijn pagina iets als dit, maar nu hoef je alleen maar een cookie in te stellen
toegevoegd de auteur user994461, de bron
de pagina die u hebt opgegeven, maakt helemaal geen gebruik van cookies.
toegevoegd de auteur Marian Bazalik, de bron