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

jQuery过滤器类别并突出显示它的儿童

1 个答案: