Filtraggio rapido e semplice con jQuery

In questa settimana screencast, impareremo come implementare il filtraggio rapido e sporco senza un database. Applicando alcune classi e un tocco di jQuery, possiamo implementare un piccolo sistema molto rapidamente.

Panoramica

Proprio ieri, mi è stato chiesto come sono stato in grado di creare la funzione di ordinamento semplice trovata nella pagina Vault del mio blog. Sinceramente, è stato fatto per fretta. Anche se alla fine eseguirò tutto attraverso un database e lo ordinerò in quel modo, per ora avevo bisogno di un modo veloce e sporco per farlo con JavaScript. Ti mostrerò quello che ho fatto.

Esercitazione video di 20 minuti

Altre opzioni di visualizzazione

• Scarica il video
• Versione di iTunes

Il jQuery finale

Aggiornato un po 'dal video.

 var ulOptions = '

• Tutti
• PHP
• CSS
• JavaScript
• HTML

'; var $ links = $ ('# link'); $ links.before (ulOptions) .children ('li') .addClass ('all') .filter ('li: odd') .addClass ('odd'); $ ('# opzioni li a'). click (function () var $ this = $ (this), type = $ this.attr ('class'); $ links.children ('li') .removeClass (' odd ') .hide () .filter ('. '+ type) .show () .filter (': odd ') .addClass (' odd '); return false;);

Aggiornamento: piccolo insetto subdolo

"SFdude" ha trovato un bug in cui, se fai doppio clic sullo stesso elemento, l'intera lista sparirà! Fortunatamente, sono stato in grado di determinare rapidamente il problema. Il problema era che dopo il primo clic, abbiamo applicato una classe di "selezionati" al tag di ancoraggio. Questo è ciò che stava causando il singhiozzo. Perché ora - aveva due classi che non corrispondevano a nulla! La soluzione è rimuovere queste due righe:

 $ ('# opzioni li a'). removeClass ('selezionato'); $ This.addClass ( 'selezionato');

Sinceramente - non erano necessari. Possiamo facilmente usare il selettore a: focus nel nostro foglio di stile per ottenere questo risultato. :)

 a: focus font-weight: bold; 

E quello lo fa. Ho aggiornato la demo e il codice sorgente. Grazie a SFdude per aver trovato quel piccolo insetto.

Allora, quali sono i tuoi pensieri? In disaccordo con questo metodo? C'è un modo migliore per farlo - senza un database? Fammi sapere!

Grazie, Screencast.com!

... per fornire l'hosting per questi tutorial video.

• Seguici su Twitter o iscriviti al feed Nettuts + RSS per altri articoli e tutorial di sviluppo web quotidiano.