jQuery: creare un filtro per la visibilità degli elementi

In jQuery è semplice creare un filtro per la visibilità degli elementi.

Supponendo che ciascun elemento filtro abbia un attributo di dati il cui valore corrisponde ad una classe specifica assegnata a uno o più elementi, possiamo scrivere il seguente codice:

$( ".filter" ).click(function() {
    var filter = $( this ).data( "filter" );
    var filterClass = "." + filter;
    $( ".items" ).fadeIn();
    $( ".items" ).not( filterClass ).fadeOut();
    return false;
});

La prima azione eseguita ripristina lo stato iniziale di visibilità di tutti gli elementi, mentre la seconda esclude gli elementi aventi la classe creata dal filtro nascondendo tutti gli altri.