javascript - 如何使用多同位素过滤器

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 个 handle 的 jquery slider - 显示年龄在 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

                    }
                })

            }
        });

两个过滤器都可以完美地独立工作。它是一个异或，我想要的是把它们结合起来!使用“与”。我怎样才能做到这一点？

谢谢。

Answer 1

我之前组合过多个同位素过滤器。您可以在此处查看示例:http://ashk3l.github.io/task-dashboard/tasks.html

组合过滤器函数是基于 example in the Isotope documentation 创建的您可以在“组合过滤器”子标题下找到它。

以下是组合上面示例中的过滤器的代码:

    //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;
    }