Question

我正在尝试构建一个过滤工具，一次过滤2个标准。我有：

<ul class="filters">
    <li class="colors"><a class="blue" href="#filter"></a></li>
    <li class="colors"><a class="red" href="#filter"></a></li>
</ul>

<ul class="filters">
    <li class="shapes"><a class="square" href="#filter"></a></li>
    <li class="shapes"><a class="circle" href="#filter"></a></li>
</ul>

<div class="dojofilter blue square"></div>
<div class="dojofilter blue circle"></div>
<div class="dojofilter red square"></div>

和jQuery：

$('.filters li').click(function () {
    var liClass = $(this).attr('class');
    $('.' + liClass).removeClass('selected');
    $(this).addClass('selected');
});

$('.filters li').click(function () {
    var SelClass = $('.selected').children('a').attr('class');
    var Others = $('div.dojofilter').not('.' + SelClass);
    $('div.' + SelClass).animate({
        height: '480px',
        width: '310px',
        opacity: '1',
    });
    $(Others).animate({
        height: '0px',
        width: '0px',
        opacity: '0'
    });

因此，在第一个函数中，我为链接分配了一个“选择”的附加类，但在任何给定时间只能“选择”1个形状和1个颜色。这很有效。

麻烦的是，我不能让它只显示红色方块，例如。您也可以切换形状，但是一旦切换单一颜色，形状就会停止工作。

好吧，看看小提琴：http://jsfiddle.net/j6fXr/

我真的不知道Firebug，但它似乎表明当你点击其中一个链接时，“this”只关注那个链接的类 - 所以要么是形状还是颜色 - 而不是所有的.selected链接。不知道为什么会这样......

我缺少什么？

编辑 - 只有在单击颜色之前单击它们，形状动画才有效。因此，一旦小提琴断开，请单击“运行”以重置它。

Answer 1

尝试

$('.filters li').click(function () {
    $(this).addClass('selected').siblings('.selected').removeClass('selected');

    var color = $('.filters li.colors.selected').data('filter');
    var shape = $('.filters li.shapes.selected').data('filter');

    var $divs = $('.dojofilter'), $filtered = $divs;
    if(color){
        $filtered = $filtered.filter('.' + color)
    }
    if(shape){
        $filtered = $filtered.filter('.' + shape)
    }
    $filtered.show();
    $divs.not($filtered).hide()
});

演示：Fiddle

Answer 2

我重新组织了一些你的代码，但我认为这正是你要找的。

使用toggleClass，您可以在元素中添加/删除selected类。

然后你必须解析每个选定的元素以获取它们的类并为多个类构造一个css选择器。

这是更新的jsfiddle：

http://jsfiddle.net/j6fXr/1/

为所有.selected元素调用a类

2 个答案: