Rask og enkel filtrering med jQuery

I denne uken er screen, Vi lærer å implementere rask og skitten filtrering uten database. Ved å bruke noen klasser og et snev av jQuery, kan vi implementere et fint lite system veldig raskt.

Oversikt

Bare i går ble jeg spurt om hvordan jeg kunne lage den enkle sorteringsfunksjonen som ble funnet på Vault-siden av bloggen min. Sannferdig ble det gjort uten hast. Selv om jeg til slutt vil kjøre alt gjennom en database og sortere den på den måten, for nå, trengte jeg en rask og skitten måte å gjøre med JavaScript. Jeg skal vise deg hva jeg gjorde.

20 minutters videoopplæring

Andre visningsalternativer

• Last ned videoen
• iTunes versjon

Den endelige jQuery

Oppdatert litt fra videoen.

 var ulOptions = '

• Alle
• PHP
• CSS
• Javascript
• HTML

'; var $ links = $ ('# links'); $ links.befor (ulOptions) .children ('li') .addClass ('all') .filter ('li: odd') .addClass ('oddetall'); $ ('# alternativer li a'). klikk (funksjon () var $ this = $ (dette), skriv = $ this.attr ('class'); $ links.children ('li') .removeClass odd ') .hide () .filter ('. '+ type) .show () .filter (': oddetall ') .addClass (' oddetall '); return false;);

Oppdatering: Sneaky Little Bug

"SFdude" fant en feil der, hvis du klikker på samme element to ganger, vil hele listen forsvinne! Heldigvis var jeg i stand til å fastslå problemet raskt. Problemet var at etter første klikk brukte vi en klasse av "valgt" til ankermerket. Det var det som forårsaket hikken. Fordi nå - det hadde to klasser som ikke ville svare til noe! Løsningen er å fjerne disse to linjene:

 $ ('# alternativer li a'). removeClass ('valgt'); $ This.addClass ( 'valgt');

Sannferdig - de var unødvendige. Vi kan like like enkelt bruke fokuseringsvelgeren i vårt stilark for å oppnå dette. :)

 a: fokus font-weight: bold; 

Og det gjør det. Jeg har oppdatert demoen og kildekoden. Takk til SFdude for å finne den lette lille feilen.

Så hva er dine tanker? Uenig med denne metoden? Er det en bedre måte å gjøre det på - uten database? Gi meg beskjed!

Takk, Screencast.com!

... for å tilby hosting for disse videoopplæringene.

• Følg oss på Twitter, eller abonner på Nettuts + RSS-feed for flere daglige webutviklinger og artikler.