Как использовать несколько изотопных фильтров

Question

Как использовать несколько изотопных фильтров?

мой первый фильтр: checkbox is checked => скрыть всех пользователей классом .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 
      } 
     }) 

второй фильтр использует ползунок Jquery с 2-мя ручками - покажите мне пользователю возрасте между х и у

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

        } 
       }) 

      } 
     }); 

Оба фильтра работают совершенно раздельно. Это XOR, я хочу объединить их! Используйте AND. Как я могу это сделать?

Спасибо.

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