Snel en eenvoudig filteren met jQuery

In de loop van deze week screencast, we leren snel en vies filteren zonder database. Door enkele klassen en een vleugje jQuery toe te passen, kunnen we heel snel een leuk klein systeem implementeren.

Overzicht

Gisteren nog werd me gevraagd hoe ik de eenvoudige sorteerfunctie die ik vond op de Vault-pagina van mijn blog kon maken. Eerlijk gezegd gebeurde het uit haast. Hoewel ik uiteindelijk alles via een database zal uitvoeren en het op die manier zal sorteren, had ik voor nu een snelle en vuile manier nodig om het met JavaScript te doen. Ik zal je laten zien wat ik deed.

20 minuten video-zelfstudie

Andere weergaveopties

• Download de video
• iTunes-versie

Het laatste jQuery

Een beetje bijgewerkt van de video.

 var ulOptions = '

• Allemaal
• PHP
• CSS
• JavaScript
• HTML

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

Update: Sneaky Little Bug

"SFdude" heeft een fout gevonden waarbij, als u tweemaal op hetzelfde item klikt, de volledige lijst zal verdwijnen! Gelukkig was ik in staat om het probleem snel te bepalen. Het probleem was dat we na de eerste klik een klasse 'geselecteerd' op de ankertag hebben toegepast. Dat was de oorzaak van de hik. Omdat nu - het had twee klassen die nergens mee overeen wilden komen! De oplossing is om deze twee regels te verwijderen:

 $ ('# options li a'). removeClass ('selected'); $ This.addClass ( 'geselecteerd');

Eerlijk gezegd waren ze onnodig. We kunnen net zo gemakkelijk de a: focus selector in ons stylesheet gebruiken om dit te bereiken. :)

 a: focus font-weight: bold; 

En dat doet het. Ik heb de demo en de broncode bijgewerkt. Dank aan SFdude voor het vinden van die stiekeme kleine wants.

Dus wat zijn jouw gedachten? Bent u het niet eens met deze methode? Is er een betere manier om het te doen - zonder een database? Laat het me weten!

Bedankt, Screencast.com!

... voor het bieden van de hosting voor deze videozelfstudies.

• Volg ons op Twitter of abonneer je op de Nettuts + RSS-feed voor meer dagelijkse webontwikkelingen, tuts en artikelen.