jquery - 同位素 : combination filtering + multiple selection

Question

致所有 jQuery 英雄，我需要帮助! (再次)

我在互联网上发现了与我类似的问题，但到目前为止还没有答案:-/

我想用 jquery 同位素过滤一堆项目。我改编了插件主页中的组合过滤器示例，它工作正常，看起来像这样:

$(function () {
var $container = $('#container'),
    filters = {};
$container.isotope({
    itemSelector: '.item',
    filter: '',
});

// filter links
$('.filter a').click(function () {
    var $this = $(this);
    // don't proceed if already selected
    if ($this.hasClass('selected')) {
        return;
    }

    var $optionSet = $this.parents('.option-set');
    // change selected class
    $optionSet.find('.selected').removeClass('selected');
    $this.addClass('selected');

    // store filter value in object
    // i.e. filters.color = 'red'
    var group = $optionSet.attr('data-filter-group');
    filters[group] = $this.attr('data-filter-value');

    // convert object into array
    var isoFilters = [];
    for (var prop in filters) {
        isoFilters.push(filters[prop])
    }
    var selector = isoFilters.join('');
    $container.isotope({
        filter: selector
    });
    return false;
}); });

以及一些过滤器菜单的 html:

<div id="nav">
    <ul class="filter option-set" data-filter-group="who">
        <li><a href="#filter-who-any" data-filter-value="" class="selected">Any</a></li>
        <li><a href="#filter-who-boys" data-filter-value=".boys">Boys</a></li>
        <li><a href="#filter-who-girls" data-filter-value=".girls">Girls</a></li>
    </ul>

</div>

我设置了一个 fiddle 演示，其中包含 3 个可以组合的过滤器类别: jsFiddle

现在我希望能够从每个类别中选择多个标签:

类别 1:a OR b OR c

和

类别 2:a OR b OR c

和

类别 3:a OR b OR c

有一个check-box-example由 desandro 提供，但这并不是我正在寻找的东西，因为我想保留类别之间的 AND 条件。基本上我想要 3 个过滤器类别，每个类别都有一些复选框(或链接，但我想复选框更实用)。我认为这两个示例中使用的方法完全不同，我不知道如何组合它们的功能。

我希望您明白我的意思，并且任何人都可以帮助我找到解决方案。

提前致谢!

Answer 1

在 Metafizzy 同位素过滤中使用多种过滤器类型需要一个多维数组来保存每种过滤器类型的数组。

有关完整的代码说明，请参阅我对 this question 的回答