Filtrado rápido y fácil con jQuery

En esta semana screencast, Aprenderemos cómo implementar un filtrado rápido y sucio sin una base de datos. Al aplicar algunas clases y un toque de jQuery, podemos implementar un pequeño sistema muy rápidamente.

Visión general

Ayer mismo, me preguntaron cómo podía crear la función de clasificación simple que se encuentra en la página de Vault de mi blog. Sinceramente, se hizo por apresuramiento. Aunque eventualmente voy a revisar todo a través de una base de datos y ordenarlos de esa manera, por ahora, necesitaba una forma rápida y sucia de hacerlo con JavaScript. Te mostraré lo que hice.

Video tutorial de 20 minutos

Otras opciones de visualización

• Descargar el video
• versión de iTunes

La final jQuery

Actualizado un poco del video..

 var ulOptions = '

• Todos
• 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;);

Actualización: Sneaky Little Bug

"SFdude" encontró un error donde, si hace clic dos veces en el mismo elemento, ¡toda la lista desaparecerá! Afortunadamente, pude determinar el problema rápidamente. El problema fue que después del primer clic, aplicamos una clase de "seleccionado" a la etiqueta de anclaje. Eso es lo que estaba causando el hipo. Porque ahora - ¡tenía dos clases que no corresponderían a nada! La solución es eliminar estas dos líneas:

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

A decir verdad, eran innecesarios. Podemos usar el selector a: focus en nuestra hoja de estilos con la misma facilidad para lograr esto. :)

 a: focus font-weight: negrita; 

Y eso lo hace. He actualizado la demo y el código fuente. Gracias a SFdude por encontrar ese pequeño error astuto.

Entonces, ¿en qué piensas? ¿En desacuerdo con este método? ¿Hay una mejor manera de hacerlo sin una base de datos? Házmelo saber!

Gracias, Screencast.com!

… Por proporcionar el alojamiento para estos video tutoriales.

• Síganos en Twitter o suscríbase a Nettuts + RSS Feed para obtener más artículos y artículos de desarrollo web diarios..