jQuery 过滤类别并突出显示其子级

Question

我需要自定义一个脚本，用于将页面上的项目筛选为类别。 它几乎按照我想要的方式工作，但不完全是！ 这是页面：http://inspiredworx.com/dev/octavius/projects.html

我想要什么： 当您单击页面底部的某个类别链接时，属于该类别子项的小“方块”的颜色将更改为深蓝色。

怎么了： 当我单击某个类别时，所有方块都会变为深蓝色。

我知道发生这种情况是因为“隐藏”的 css 类被应用于单击时的所有方块，而不仅仅是父元素的子元素（类别链接）。

有人可以帮我解决我的代码片段吗：

$(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;
});

});

提前致谢

Answer 1

如果我理解正确的话，在选择过滤器时，您想要淡出与过滤器不匹配的项目并淡入与过滤器匹配的项目。

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);
});