如何使用多同位素過濾器

Question

我怎樣才能使用多個同位素過濾器？

我的第一個過濾器：復選框已選中=>使用.no-avatar類隱藏所有用戶！

            $("#foto_filter").on("change",function(){
                  if($(this).is(":checked")) {

                       $grid.isotope({filter: ['*:not(.no-avatar)' ]});  // zeig alli divs mit Fotis also ohni .no-avatar class
            }else{

                $grid.isotope({filter: '*' })   // show all
            }
        })

第二個過濾器：使用帶有2個句柄的jquery滑塊 - 向我顯示年齡介於x和y之間的用戶

            $( "#slider-range" ).slider({
            range: true,
            min: 18,
            max: 100,
            values: [ 18, 50 ],
            slide: function( event, ui ) {
                $( "#amount" ).val( ui.values[ 0 ] + " Jahre - " + ui.values[ 1 ]+" Jahre" );
                $grid.isotope({
                       filter: function() {
                        // _this_ is the item element. Get text of element's .number
                        var number = $(this).find('.age').text();
                        // return true to show, false to hide
                        return (parseInt( number, 10 ) >= ui.values[ 0 ]) && (parseInt( number, 10 ) <= ui.values[ 1 ]) ;  // here is the filter

                    }
                })

            }
        });

兩個過濾器完全分離。 這是異或，我想要的是將它們結合起來！ 使用AND。 我怎樣才能做到這一點？

謝謝。

Answer 1

我以前合並過多個同位素過濾器。 你可以在這里看到一個例子： http ： //ashk3l.github.io/task-dashboard/tasks.html

組合過濾器功能是根據Isotope文檔中的示例創建的，您可以在子標題“組合過濾器”下找到該示例 。

以下是結合上述示例中的過濾器的代碼：

    //define parent container and empty array object
    var $container = $('.task-container');
    filters = {};

    // store filter for each group
    var filters = {};

    $('ul.dropdown-menu li').on('click', 'a', function () {
        var $this = $(this);
        // get group key
        var $dropdownGroup = $this.parents('.dropdown');
        var filterGroup = $dropdownGroup.attr('data-filter-group');
        // set filter for group
        filters[filterGroup] = $this.attr('data-filter');
        // combine filters
        var filterValue = concatValues(filters);
        $container.isotope({
            filter: filterValue
        });
    });

    // flatten object by concatting values
    function concatValues(obj) {
        var value = '';
        for (var prop in obj) {
            value += obj[prop];
        }
        return value;
    }