Применить несколько фильтров с помощью флажков и list.js

Question

Я пытаюсь отфильтровать некоторые результаты на основе группы флажков, используя плагин list.js.

Мне удалось сортировать по одному критерию на данный момент, который сортируется только по одному элементу за раз, то есть только легкий, только умеренный, но когда я пытаюсь выбрать несколько флажков, на данный момент он не работает. одновременно выбирая как легкие, так и умеренные.

Есть ли у кого-нибудь советы, как я могу это сделать. Ниже приведены html и javascript.

Заранее спасибо.

<div id="search-results"> 
    Sort by: 
    <button class="sort btn" data-sort="name"> 
     Name <i class="fa fa-fw"></i> 
    </button> 
    <button class="sort btn" data-sort="date"> 
     Departures <i class="fa fa-fw"></i> 
    </button> 
    <button class="sort btn" data-sort="difficulty"> 
     Difficulty <i class="fa fa-fw"></i> 
    </button> 

    Filter: 
    <label for="easy">Easy</label> 
    <input type="checkbox" name="easy" class="filter" data-value="Easy" /> 
    <label for="moderate">Moderate</label> 
    <input type="checkbox" name="moderate" class="filter" data-value="Moderate" /> 
    <label for="challenging">Challenging</label> 
    <input type="checkbox" name="challenging" class="filter" data-value="Challenging" /> 


    <div class="list"> 

     @foreach (var page in umbracoPages.OrderBy(x => x.Difficulty)) 
     { 
      <div class="package"> 
       <span class="name">@page.Name</span><br /> 
       <span class="date"><strong>@page.Date @(page.Date == 1 ? "departure" : "departures") available</strong></span><br /> 
       <span class="difficulty">@page.Difficulty</span> 
      </div> 
     } 

    </div> 
</div> 

Javascript:

$(function() { 
    $("#dateFrom, #dateTo").datepicker({ 
     dateFormat: "dd.mm.yy", 
     constrainInput: true, 
     changeMonth: true, 
     changeYear: true, 
     minDate: 0 
    }); 

    var options = { 
     valueNames: ['name', 'date', 'difficulty' ] 
    }; 

    var userList = new List('search-results', options); 


    //filter 
    $('.filter').change(function() { 
     var bool = this.checked; 
     var value = $(this).data("value"); 

     userList.filter(function (item) { 
      if (item.values().difficulty == value && bool == true) { 
       return true; 
      } else if (userList.filtered && bool == false) { 
       return true; 
      } else { 
       return false; 
      } 


     }); 

     return false; 

    }); }); 

Answer 1

Вы должны хранить активные фильтры в массиве и проверить против всех.

$(function() { 
var options = { 
    valueNames: ['name', 'date', 'difficulty' ] 
}; 

var userList = new List('search-results', options); 
var activeFilters = []; 

//sort 
userList.on("updated", function() { 
    $('.sort').each(function() { 
     if ($(this).hasClass("asc")) { 
      $(this).find(".fa").addClass("fa-sort-asc").removeClass("fa-sort-desc").show(); 
     } else if ($(this).hasClass("desc")) { 
      $(this).find(".fa").addClass("fa-sort-desc").removeClass("fa-sort-asc").show(); 
     } else { 
      $(this).find(".fa").hide(); 
     } 
    }) 
}) 

//filter 
$('.filter').change(function() { 
    var isChecked = this.checked; 
    var value = $(this).data("value"); 

    if(isChecked){ 
     // add to list of active filters 
     activeFilters.push(value); 
    } 
    else 
    { 
     // remove from active filters 
     activeFilters.splice(activeFilters.indexOf(value), 1); 
    } 

    userList.filter(function (item) { 
     if(activeFilters.length > 0) 
     { 
      return(activeFilters.indexOf(item.values().difficulty)) > -1; 
     } 
     return true; 
    }); 
}); 

}); 

http://codepen.io/anon/pen/QbOYaG