同位素:组合过滤+多项选择 [英] Isotope: combination filtering + multiple selection

问题描述

对于所有jQuery英雄，我需要帮助！ (再次)

To all jQuery heros out there, I need help! (again)

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

I found similar questions to mine on the internet but there were no answers so far :-/

我想用jquery同位素过滤一堆物品.我从插件首页改编了组合过滤器示例，该示例运行正常，看起来像这样:

I want to filter a bunch of items with jquery isotope. I adapted the combination filter example from the plugin homepage, which works fine and looks like so:

$(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过滤器菜单:

and some html of the filter menu:

<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>

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

I set up a fiddle demo with 3 filter categories which can be combined: jsFiddle

现在，我想从每个类别中选择多个标签:

Now I'd like to make it possible to select multiple tags from each category:

类别1:a OR b OR c

Category 1: a OR b OR c

AND

类别2:a OR b OR c

Categoy 2: a OR b OR c

AND

类别3:a OR b OR c

Categoy 3: a OR b OR c

desandro有一个复选框示例，但这不是我所要的.我正在搜索，因为我想将AND条件保持在类别之间.基本上我想要3个过滤器类别，每个类别都有一些复选框(或链接，但我想复选框更实用). 我认为两个示例中使用的方法完全不同，并且我不知道如何组合它们的功能.

There's a check-box-example by desandro, but this is not quite the thing I'm searching for, because I want to keep the AND condition between the categories. Basically I want 3 filter categories with some check-boxes for each of them (or links but I guess check-boxes are more functional). I think the methods used in both examples are completely different and I don't know how to combine their functionality.

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

I hope you get my point and that anyone could help me find a solution.

提前谢谢！

推荐答案

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

Using multiple filter types with metafizzy isotope filtering requires a multi-dimensional array to hold an array of each filter type.

我有一个实时示例此处

示例的js是此处

有关完整的代码说明，请参见我对此问题的答案

For a full code explanation see my answer to this question

这篇关于同位素:组合过滤+多项选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！