Question

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

我的第一个过滤器：复选框已选中=＆gt;使用.no-avatar class隐藏所有用户！

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

组合过滤器功能是根据您在小标题＆＃34;组合过滤器＆＃34;

下找到的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;
    }

如何使用多同位素过滤器

1 个答案: