Accentsconagua

Schnelles und einfaches Filtern mit jQuery

Code
Share

In dieser Woche Screencast, Wir lernen, wie Sie eine schnelle und fehlerhafte Filterung ohne Datenbank implementieren können. Durch die Anwendung einiger Klassen und einen Hauch von jQuery können wir sehr schnell ein nettes kleines System implementieren.


Überblick

Erst gestern wurde ich gefragt, wie ich die einfache Sortierfunktion auf der Vault-Seite meines Blogs erstellen kann. Ehrlich gesagt wurde es aus Eile erledigt. Obwohl ich irgendwann alles durch eine Datenbank laufen lasse und es auf diese Weise sortiere, brauchte ich jetzt einen schnellen und schmutzigen Weg, um es mit JavaScript zu tun. Ich zeig dir was ich getan habe.



20 Minuten Video-Tutorial

Andere Anzeigeoptionen

  • Laden Sie das Video herunter
  • iTunes Version

Die letzte jQuery

Ein bisschen aus dem Video aktualisiert.

 var ulOptions = '
  • Alles
  • PHP
  • CSS
  • JavaScript
  • HTML
'; var $ links = $ ('# links'); $ links.before (ulOptions) .children ('li') .addClass ('all') .filter ('li: odd') .addClass ('odd'); $ ('# options 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;);

Update: Hinterlistiger kleiner Fehler

"SFdude" hat einen Fehler gefunden, bei dem, wenn Sie zweimal auf dasselbe Element klicken, die gesamte Liste verschwinden! Glücklicherweise konnte ich das Problem schnell feststellen. Das Problem war, dass wir nach dem ersten Klick dem Anker-Tag eine Klasse "ausgewählt" zugewiesen haben. Das war es, was den Schluckauf verursacht hat. Weil jetzt - es gab zwei Klassen, die nichts entsprechen würden! Das Update besteht darin, diese beiden Zeilen zu entfernen:

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

Ehrlich gesagt - sie waren unnötig. Wir können den a: focus-Selektor in unserem Stylesheet genauso verwenden, um dies zu erreichen. :) 

 a: focus font-weight: fett;

Und das macht es. Ich habe die Demo und den Quellcode aktualisiert. Vielen Dank an SFdude, dass Sie diesen kleinen Fehler gefunden haben.

Was sind deine Gedanken? Stimme dieser Methode nicht zu? Gibt es einen besseren Weg - ohne Datenbank? Gib mir Bescheid!

Vielen Dank, Screencast.com!



… Für das Hosting dieser Video-Tutorials.
  • Folgen Sie uns auf Twitter oder abonnieren Sie den Nettuts + RSS-Feed für mehr tägliche Webentwicklungsberichte und -artikel.


Code
×