0

我正在尝试构建一个过滤工具，一次过滤 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'
    });

因此，通过第一个函数，我为链接分配了一个“已选择”的附加类，但在任何给定时间只能“选择”一种形状和一种颜色。那运作良好。

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

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

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

我错过了什么？

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

4

2 回答 2

2

尝试

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

演示：小提琴

于 2013-09-14T01:20:55.833 回答
1

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

使用toggleClass您可以将类添加/删除selected到您的元素。

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

这是更新的jsfiddle：

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

于 2013-09-14T01:52:40.320 回答