создание сортируемого портфолио с помощью jquery

Question

Я создал макет для моей новой веб-страницы портфолио здесь: http://vitaminjdesign.com/work.html

Я хочу иметь легенду с тегами (ВСЕ, дизайн логотипа, маркетинг, веб-дизайн, дизайн полиграфии), и при нажатии на эти теги страница фильтрует результаты и отображает их так, как они отображаются в данный момент. Сначала я хочу, чтобы ВСЕ проекты отображались, но когда пользователь нажимает на тег (например, «печатный дизайн»), список фильтруется и отображается.

Если у меня есть эта легенда: <a href="#" class="logos">logo</a>

и при нажатии на логотип я хочу, чтобы все элементы div с классом "logos" остались, а все элементы div с другими классами исчезли.

Какой самый простой способ в jquery сделать эту работу. Пожалуйста, обратите внимание: я не очень разбираюсь в jquery, поэтому, пожалуйста, будьте как можно более тщательным и идиотским.

Answer 1

Сначала добавьте классы (логотип, маркетинг, веб-дизайн, принт-дизайн), которые применяются к каждому проекту, к разделу, которому вы назначаете числовой класс.

Затем создайте ссылки для фильтрации по каждому тегу, например:

<a href='#' class="logodesign">Logo Design</a>

Затем назначьте событие щелчка, которое скроет остальные и покажет выбранное.

var $projects = $('#projects');
$('a.logodesign').click(function() {
    hideAll();
    showTag('logodesign');
});
function showTag(tag){
    $projects.find('div.'+tag).stop(true).fadeIn();
}
function hideAll(){
    $projects.find('div.logodesign, div.marketing, div.webdeisgn, div.preintdesign').fadeOut();
}

Answer 2

Хотя это и не является прямым ответом на мой вопрос, я нашел учебник о том, как добиться ТОЧНО того, чего я хотел. Это здесь:

http://www.newmediacampaigns.com/page/a-jquery-plugin-to-create-an-interactive-filterable-portfolio-like-ours#zip