如何使用多重同位素过滤器答案

【问题标题】：How to use multiple isotope filter如何使用多重同位素过滤器
【发布时间】：2015-08-10 03:27:24
【问题描述】：

如何使用多个同位素过滤器？

我的第一个过滤器：选中复选框=> 隐藏所有具有 .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。我该怎么做？

谢谢。

【问题讨论】：

能否分享一个指向 jsfiddle 或 codepen 的链接，以便更轻松地制定解决方案？
jsfiddle.net/p46nxug9 在这个例子中，复选框过滤器不起作用，我不知道为什么。我现在解决了我的问题：选中复选框时=>我用css打开display：none。这与数字过滤器结合使用。但这不是最好的方法。

标签： javascript jquery filter jquery-isotope

【解决方案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;
    }

【讨论】：