Mettre en place un système de filtre simple

15 juin 2013 nakama

Développement

(Cet article a été écrit il y a très longtemps, dans une galaxie très très lointaine)

Des fois, on a besoin d’afficher à l’utilisateur que certaine information.

Pour cela, il existe plusieurs méthodes (faire des pages spécifiques, ajax etc.), nous on va voir une façon simple qui se base simplement sur cacher ou non tel ou tel élément.

Cette solution, est utile quand il n’y a pas beaucoup d’élément ,car on charge tout dans la page pour ensuite cacher les éléments en jQuery. Si vous voulez faire un système de filtre pour énormément d’élément, il faudra alors se tourner vers de l’ajax afin de charger dans la page uniquement les bonnes informations.

On commence avec la structure html

Ici, la structure est très simple et par défaut tout est affiché.

On continue avec le script de filtre

Explications :

– ligne 3 : .data() permet de récupérer la data qui a pour nom filter
– ligne 15 : on vérifie si l’élément n’a pas la classe sélectionné par le filtre et si on ne souhaite pas tout afficher

Le principe est simple, à chaque clique sur un filtre, on affiche tout pour ensuite cacher uniquement les informations qu’on ne souhaite pas !
Pour savoir sur quel filtre on a cliqué, on lui ajoute une classe active afin de pouvoir le différencier en css.

Mots-clés associés à cet article :

Retrouvez d'autres articles par catégories

id, risus ante. consectetur accumsan quis, Nullam Aliquam