使用複選框和list.js應用多個過濾器

Question

我想基於一組複選框使用list.js插件來過濾一些結果。

我已經設法按一個標準排序，一次只排序一個項目，即只是簡單，只是適度，但是當我嘗試並選擇多個複選框的時候，它不起作用，即。同時選擇easy和moderate。

有沒有人有任何建議，我可以做到這一點。下面是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