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

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

我的第一个过滤器：选中复选框=>隐藏所有用户。没有化身类

            $("#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

                    }
                })

            }
        });

$（“#滑块范围”）.滑块({
范围：对，
民:18,，
最高：100，
数值：[18,50]，
幻灯片：功能（事件、用户界面）{
$（“#金额”）.val（ui.values[0]+“Jahre-”+ui.values[1]+“Jahre”）；
$grid.com({
过滤器：函数（）{
//这是item元素。获取元素的.number的文本
var number=$（this.find（'.age'）.text（）；
//返回true表示显示，返回false表示隐藏
return（parseInt（number，10）>=ui.values[0]）&（parseInt（number，10）我以前组合过多个同位素过滤器。您可以在这里看到一个示例：

组合过滤器功能是根据子目“组合过滤器”下的数据创建的

下面是组合上述示例中过滤器的代码：

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

您可以共享一个指向JSFIDLE或codepen的链接，以便更容易地制定解决方案吗？在本例中，复选框过滤器不起作用，我不知道为什么。我现在解决了我的问题：当复选框被选中时=>我将显示：无与css一起。这与数字过滤器结合使用。但这不是最好的方法。