jQuery Girl
  1. jQuery Girl
  3. Filtrage avec des cases à cocher à l’aide de jQuery
Intereting Posts
Ouvrir la boîte de dialog de téléchargement de fichier dans Chrome Bootstrap append des lignes à une table Déclencheur $ (fenêtre) .scroll (); jquery fadeIn n’atteint-il pas une opacité complète lors d’un double clic? jquery $ (‘. class’). each () combien d’éléments? Intel xdk ne fonctionne pas sur Android Charger du contenu div externe sur ma page div Qu’est-ce que jQuery NoConflict? Pourquoi avons-nous besoin de cela? Charger le panneau externe dans la page Jquery Mobile jQuery montrant une chaîne vide sur le texte saisi? Comportement conditionnel avec $ (window) .width récupère les données du contrôleur dans un allumeur de code JSON Comment résoudre / pirater un bogue PNG semi-transparent atténuant dans IE8? Validation MVC avec JQuery Accordion La validation HTML5 “requirejse” ne montre pas le message d’erreur dans Mozilla Firefox

Filtrage avec des cases à cocher à l’aide de jQuery

Je souhaite filtrer du contenu à l’aide de cases à cocher.

J’ai réussi à le faire grâce à un article précédent que j’ai un peu simplifié ici DEMO .

Mon problème est que chaque élément de contenu peut avoir plus d’une catégorie attachée. Lorsque je sélectionne les catégories A et B, puis désélectionne la catégorie B, l’élément de contenu auquel les deux catégories sont attachées est supprimé.

Le projet sur lequel je travaille va contenir plus de deux catégories. Un élément de contenu peut avoir plusieurs catégories attachées

HTML: 

     
  •    
    •  
  •    
    •  
 
A, B
 
A
 
A
 
A
 
B
 
B
 
B

Javascript: 

 $('input').click(function() { var category = $(this).val(); if (!$(this).attr('checked')) $('.' + category).hide(); else $('.' + category).show(); });

    Je pense que les deux approches les plus simples seraient en cliquant sur l’une des cases à cocher du filtre:

    1. Cachez tous les éléments

      , puis parcourez les cases à cocher et, pour chaque .show() les éléments

      avec la catégorie associée.

    2. Parcourez toutes les cases à cocher pour dresser une liste des classes à afficher, puis parcourez les éléments

      , en vérifiant chacune d’elles si elle contient l’une de ces classes et .hide() ou .show() selon le cas.

    Existe-t-il un sélecteur général que vous pouvez utiliser pour obtenir tous les éléments

    ? Ont-ils un élément conteneur particulier, comme comment toutes les cases à cocher sont des descendants de “#filters”? 

     // Solution 1 $("#filters :checkbox").click(function() { $("div").hide(); $("#filters :checkbox:checked").each(function() { $("." + $(this).val()).show(); }); });

    Démo: http://jsfiddle.net/6wYzw/41/ 

     // Solution 2 $("#filters :checkbox").click(function() { var re = new RegExp($("#filters :checkbox:checked").map(function() { return this.value; }).get().join("|") ); $("div").each(function() { var $this = $(this); $this[re.source!="" && re.test($this.attr("class")) ? "show" : "hide"](); }); });

    Démo: http://jsfiddle.net/6wYzw/42/

    Je suppose que le premier moyen est plus court et plus facile à maintenir …

    Je voulais append une animation jQuery à afficher et à masquer. Les solutions ci-dessus ne permettaient pas cela (tout d’abord, tout cacher, puis s’afficher) ou encombrantes avec des expressions régulières. Ma solution, basée sur ce qui précède, est la suivante: 

     var showselector = $('input:checkbox').map(function(){ return this.checked ? '.' + this.id : null; }).get().join(','); var hideselector = (showselector) ? ':not(' + showselector + ')' : '*'; $("div").filter(showselector).slideDown(1500); $("div").filter(hideselector).slideUp(1500);

    Quand ils cliquent sur une case à cocher, construisez un sélecteur comme celui-ci: 

     var selector = $('input:checkbox').map(function(){ return this.checked ? '.' + this.id : ''; }).get().join('');

    Cela générera un sélecteur comme categoryb.categoryc (un sélecteur AND css). Vous pouvez ensuite tout masquer et afficher ceux qui correspondent au sélecteur. 

     $('div[class^="category"]') .hide() .filter(selector) .show();

    Essayez-le sur jsbin

    Code de travail: 

     $('input').click(function() { var selector = $('input:checkbox').map(function(){ return this.checked ? '.' + this.id : ''; }).get().join(''); console.log(selector); var all = $('div[class^="category"]'); if(selector.length) all.hide().filter(selector).show() else all.show(); });

    http://jsfiddle.net/FfZsC/ 

     $('input').click(function() { var category = $(this).val(); $('.' + category).each(function () { var anyChecked = false; var classArray = this.className.split(/\s+/); for(idx in classArray) { if ($('#filter-' + classArray[idx]).is(":checked")) { anyChecked = true; break; } } if (! anyChecked) $(this).hide(); else $(this).show(); }); });

    En gros, je coche chaque case de catégorie associée aux éléments liés au filtre sur lequel l’utilisateur a cliqué. Si certains d’entre eux sont toujours cochés, l’élément est affiché. sinon, c’est caché.

    @ Josiah Ruddell – le code n’est pas en cours d’exécution dans IE9

    J’ai ajouté “window.console &&” à … console.log … pour fonctionner correctement dans IE9 

     $('input').click(function() { var selector = $('input:checkbox').map(function(){ return this.checked ? '.' + this.id : ''; }).get().join(''); window.console && console.log(selector); var all = $('div[class^="category"]'); if(selector.length) all.hide().filter(selector).show() else all.show(); });