jQuery Girl
  1. jQuery Girl
  3. Afficher / masquer à l’aide de la bascule d’enregistrement au cookie
Intereting Posts
Puis-je utiliser JQuery pour rechercher et définir automatiquement la largeur et la hauteur d’une variété d’images? javascript – ouverture d’iframe caché pour le téléchargement de fichier sur le document prêt Javascript, Fonction quand la case non cochée div est masquée Supprimer les espaces de début / fin de textarea à l’aide de jQuery? Passer le tableau à la requête ajax dans $ .ajax () Angular 2 et jQuery – comment tester? jQuery Mobile alignement des images miniatures Que se passe-t-il lorsqu’un événement est déclenché et que la mise à jour de la page a lieu simultanément? changer les dimensions de l’image avec jQuery Comment utiliser les images d’arrière-plan avec le carrousel des hiboux Télécharger la barre de progression Servlet Java? Option d’annulation déplaçable jQuery jquery: inverser une commande code simple à afficher / masquer avec cookie Remplacer les boutons radio par des images à l’aide de JQuery

Afficher / masquer à l’aide de la bascule d’enregistrement au cookie

Peut-on améliorer cela avec une seule fonction toogle? 

var show = $("#shows ul li"); show.addClass("active"); $(show).each(function(c){ var cvalue = $.cookie('show' + c); if ( cvalue == 'closed' + c ) { $(this).css({display:"none"}); $(this).removeClass('active').addClass('inactive'); }; }); $("#shows li.active").toggle(function(){ var num = show.index(this); var cookieName = 'show' + num; var cookieValue = 'closed' + num; $(this).slideUp(500); $(this).removeClass('active'); $.cookie(cookieName, cookieValue, { path: '/', expires: 10 }); },function(){ var num = $(this).index(this); var cookieName = 'show' + num; $(this).slideDown(500); $(this).addClass("active"); $.cookie(cookieName, null, { path: '/', expires: 10 }); }); $("#shows li.inactive").toggle(function(){ var num = show.index(this); var cookieName = 'show' + num; $(this).slideDown(500); $(this).addClass("active"); $(this).removeClass('inactive'); $.cookie(cookieName, null, { path: '/', expires: 10 }); },function(){ var num = show.index(this); var cookieName = 'show' + num; var cookieValue = 'closed' + num; $(this).slideUp(500); $(this).removeClass('active'); $.cookie(cookieName, cookieValue, { path: '/', expires: 10 }); });

Vous pouvez faire quelque chose comme ça … 

 $("#shows li").toggle(function(){ var isactive = $(this).hasClass("active") ? true : false; var num = show.index(this); var cookieName = 'show' + num; var cookieValue = null; if(isactive){ cookieValue = 'closed' + num; $(this).slideUp(500); $(this).removeClass('active'); }else{ $(this).slideDown(500); $(this).addClass("active"); $(this).removeClass('inactive'); } $.cookie(cookieName, cookieValue, { path: '/', expires: 10 }); },function(){ var isactive = $(this).hasClass("active") ? true : false; var num = $(this).index(this); var cookieName = 'show' + num; var cookieValue = null; if(isactive){ $(this).slideDown(500); $(this).addClass("active"); }else{ cookieValue = 'closed' + num; $(this).slideUp(500); $(this).removeClass('active'); } $.cookie(cookieName, cookieValue, { path: '/', expires: 10 }); });

Peut-être que cela rend les choses plus belles: 

 function func1() { var num = show.index(this); var cookieName = 'show' + num; var cookieValue = 'closed' + num; $(this).slideUp(500); $(this).removeClass('active'); $.cookie(cookieName, cookieValue, { path: '/', expires: 10 }); } function func2() { var num = $(this).index(this); var cookieName = 'show' + num; $(this).slideDown(500); $(this).addClass("active"); $.cookie(cookieName, null, { path: '/', expires: 10 }); } $("#shows li.active").toggle(func1,func2); $("#shows li.inactive").toggle(func2,func1);

Sans voir votre balisage, vous pouvez certainement le réduire à un seul. Par exemple, en utilisant les méthodes toggleClass et slideToggle : 

 $("#shows li").toggle(function(){ var num = show.index(this); $(this).slideToggle(500); $(this).toggleClass('active'); var cookieName = 'show' + num; var cookieValue = ($(this).hasClass("active") ? 'show' : 'closed') + num; $.cookie(cookieName, cookieValue, { path: '/', expires: 10 }); }

Avez-vous vraiment besoin des classes .active et .inactive ? Je suggérerais que les éléments basculent simplement entre la classe .active (et rien, ce qui implique “inactif”).