jQuery Filter Категории и выделить его Дети - PullRequest
Новая
       15

jQuery Filter Категории и выделить его Дети

0 голосов
/ 20 февраля 2012

Мне нужно настроить скрипт, который фильтрует элементы на странице по категориям. Это почти работает, как я хочу, но не совсем! Вот эта страница: http://inspiredworx.com/dev/octavius/projects.html

Что я хочу: Когда вы нажимаете на одну из ссылок категории в нижней части страницы, маленькие «квадраты», являющиеся дочерними для этой категории, изменят цвет на темно-синий.

Что происходит: Когда я нажимаю на категорию, все квадраты становятся темно-синими.

Я понимаю, что это происходит потому, что класс css 'hidden' применяется ко всем квадратам при нажатии, а не только к дочерним элементам родительского элемента (ссылка на категорию).

Может кто-нибудь помочь мне с моим фрагментом здесь: 

$(document).ready(function() {
$('ul#filter a').click(function() {
    $(this).css('outline','none');
    $('ul#filter .current').removeClass('current');
    $(this).parent().addClass('current');

    var filterVal = $(this).text().toLowerCase().replace(' ','-');

    if(filterVal == 'all') {
        $('#portfolio .item .link.hidden').fadeIn('slow').removeClass('hidden');
    } else {

        $('#portfolio .item .link a').each(function() {
            if(!$(this).hasClass(filterVal)) {
                $(this).fadeIn('slow').addClass('hidden');
            } else {
                $(this).fadeIn('slow').removeClass('hidden');
            }
        });
    }

    return false;
});

});

Заранее спасибо

1 Ответ

0 голосов
/ 20 февраля 2012

Если я правильно вас понимаю, при выборе фильтра вы хотите постепенно исчезать элементы, не соответствующие фильтру, и постепенно добавлять элементы, соответствующие фильтру. 

function applyFilter(e){
    var target = $(e.target).closest('a');
    target
        .css('outline', 'none')
        .parent()
            .addClass('current')
            .siblings('.current')
                .removeClass('current')
    ;

    var filterVal = $(this).text().toLowerCase().replace(' ','-');
    if(filterVal == 'all') {
        $('#portfolio .item .link.hidden').fadeIn('slow', 
            function(){ 
                $('#portfolio .item .link.hidden').removeClass('hidden');
            }
        );
    } 
    else {
        $('#portfolio .item .link a').each(function() {
            if(!$(this).hasClass(filterVal)) {
                $(this).fadeOut('slow', function(){$(this).addClass('hidden');});
            } else {
                $(this).fadeIn('slow', function(){$(this).removeClass('hidden');});
            }
        });   
    }
}

$(document).ready(function() {
    $('ul#filter a').click(applyFilter);
});
...