1

此功能按类显示/隐藏子元素，但目前需要单独指定每个父元素。我怎样才能修改它，以便它触发相关的子、孙等，而不必指定id每个我想要包括的？

我在这里发布了一个带有工作示例的小提琴：http: //jsfiddle.net/chayacooper/YvMwL/

$(document).ready(function() {
$('#filterOptions li a').click(function() {
    var ourClass = $(this).attr('class');
    $('#filterOptions li').removeClass('active');
    $(this).parent().addClass('active');        

    if(ourClass == 'all') {
        $('#content').children('div.item').show();
        $('#list').children('li.item').show();  
    }
    else {          
        $('#content').children('div:not(.' + ourClass + ')').hide();
        $('#list').children(':not(li.' + ourClass + ')').hide();
        $('#content').children('div.' + ourClass).show();
        $('#list').children('li.' + ourClass).show();
    }
    return false;
});
});
4

1 回答 1

1

所以，这里有两个问题。首先，您要选择的项目具有不同的标签名称，其次它们处于不同的级别（divs是孩子，lis是孙子）。幸运的是，您已经有了一种方法来引用所有这些项目：.item类。

因此，如果我们将该find方法与这种新的选择器方法一起使用，那么我们可以修改您的 jsFiddle：

    if (ourClass == 'all')
    {
        // show all our items
        $('#content').find('.item').show();
    }
    else
    {
        // hide all elements that don't share ourClass
        $('#content').find('.item:not(.' + ourClass + ')').hide();

        // show all elements that do share ourClass
        $('#content').find('.item.' + ourClass).show();
    }

我的叉子在这里：http: //jsfiddle.net/chayacooper/WZpMh/4/

于 2013-03-23T00:15:16.620 回答