Быстрая и простая фильтрация с помощью jQuery

9 января 2018

На скринкасте этой недели мы узнаем, как реализовать быструю и грязную фильтрацию без базы данных. Применяя некоторые классы и прикосновение jQuery, мы можем очень быстро реализовать небольшую небольшую систему.

Обзор

Вчера я спросил, как мне удалось создать простую функцию сортировки, найденную на странице Vault моего блога. По правде говоря, это было сделано из спешки. Хотя я, в конечном счете, буду запускать все через базу данных и сортировать ее таким образом, пока мне нужен быстрый и грязный способ сделать это с помощью JavaScript. Я покажу вам, что я сделал.

20 минут видеоурока

Другие параметры просмотра

Загрузить версию видео iTunes

Заключительный jQuery

Обновлено немного из видео.

var ulOptions = '

Все PHP CSS JavaScript HTML

Обновление: Sneaky Little Bug

«SFdude» обнаружил ошибку, где, если вы дважды нажмете на один и тот же элемент, весь список исчезнет! К счастью, я смог быстро решить проблему. Проблема заключалась в том, что после первого щелчка мы применили класс «selected» к тегу привязки. Именно это и вызывало икоту. Потому что теперь - у него было два класса, которые ничего не соответствовали бы! Исправление состоит в том, чтобы удалить эти две строки:

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

Истинно - они не нужны. Мы можем так же легко использовать селектор a: focus в нашей таблице стилей, чтобы выполнить это.:)

a:focus {
 font-weight: bold;
}

И это все. Я обновил демо и исходный код. Спасибо SFdude за то, что он нашел эту пронзительную маленькую ошибку.

Итак, что вы думаете? Не согласны с этим методом? Есть ли лучший способ сделать это - без базы данных? Дай мне знать!

Спасибо, Screencast.com!

Следуйте за нами в Twitter или подписаться на Nettuts + RSS Feed для более ежедневных веб-разработок и статей.