Listjs多重筛选和排序

Question

我试图使它，以便我可以过滤多个项目，包括什么是目前被搜索或排序。目前，如果我对单个项进行筛选，并且对其进行排序或搜索，则它可以工作，但不适用于两个或多个筛选器。我使用复选框，这样用户就可以选择他们想要过滤的内容。当我检查第二个过滤器时，前一个过滤器将被删除。我查看了ListJS站点，但是它们只给出了函数/API，但是没有关于如何使用它们的示例。我尝试在堆栈溢出的另一个问题上使用其中一个答案，但当我使用筛选器时，它返回了一个空白查询。我想要能够搜索，例如:男性冠军，自由发挥，坦克或类似的东西。

下面是我要修复的页面：http://lolskin.comoj.com/champions.html

这里是javascript:

    var options = {
valueNames: [ 'name', 'rp', 'ip', 'number', 'gender', 'sale', 'free', 'assassin', 'fighter', 'mage', 'marksman', 'support', 'tank' ]
};

var championList = new List('champions', options);

$('#genderx').change(function(){
    if($(this).is(':checked')) {
        championList.filter(function(item) {
            if (item.values().gender == 'm'){
                return true;
            }
            else {
                return false;
            }
        }); //Only items with gender == m are shown in list
    }
    else{
        championList.filter();
    }
});//End Male Gender

$('#gendery').change(function(){
    if($(this).is(':checked')) {
        championList.filter(function(item) {
            if (item.values().gender == 'f'){
                return true;
            }
            else {
                return false;
            }
        }); //Only items with gender == f are shown in list
    }
    else{
        championList.filter();
    }
});//End Female Gender

$('#salex').change(function(){
    if($(this).is(':checked')) {
        championList.filter(function(item) {
            if (item.values().sale == '1'){
                return true;
            }
            else {
                return false;
            }
        }); //Only items with sale == 1 are shown in list
    }
    else{
        championList.filter();
    }
});//End Sale

$('#freex').change(function(){
    if($(this).is(':checked')) {
        championList.filter(function(item) {
            if (item.values().free == '1'){
                return true;
            }
            else {
                return false;
            }
        }); //Only items with free == 1 are shown in list
    }
    else{
        championList.filter();
    }
});//End Free

$('#assassinx').change(function(){
    if($(this).is(':checked')) {
        championList.filter(function(item) {
            if (item.values().assassin == '1'){
                return true;
            }
            else {
                return false;
            }
        }); //Only items with assassin == 1 are shown in list
    }
    else{
        championList.filter();
    }
});//End Assassin

$('#fighterx').change(function(){
    if($(this).is(':checked')) {
        championList.filter(function(item) {
            if (item.values().fighter == '1'){
                return true;
            }
            else {
                return false;
            }
        }); //Only items with fighter == 1 are shown in list
    }
    else{
        championList.filter();
    }
});//End Fighter

$('#magex').change(function(){
    if($(this).is(':checked')) {
        championList.filter(function(item) {
            if (item.values().mage == '1'){
                return true;
            }
            else {
                return false;
            }
        }); //Only items with mage == 1 are shown in list
    }
    else{
        championList.filter();
    }
});//End Mage

$('#marksmanx').change(function(){
    if($(this).is(':checked')) {
        championList.filter(function(item) {
            if (item.values().marksman == '1'){
                return true;
            }
            else {
                return false;
            }
        }); //Only items with marksman == 1 are shown in list
    }
    else{
        championList.filter();
    }
});//End Marksman

$('#supportx').change(function(){
    if($(this).is(':checked')) {
        championList.filter(function(item) {
            if (item.values().support == '1'){
                return true;
            }
            else {
                return false;
            }
        }); //Only items with support == 1 are shown in list
    }
    else{
        championList.filter();
    }
});//End Support

$('#tankx').change(function(){
    if($(this).is(':checked')) {
        championList.filter(function(item) {
            if (item.values().tank == '1'){
                return true;
            }
            else {
                return false;
            }
        }); //Only items with tank == 1 are shown in list
    }
    else{
        championList.filter();
    }
});//End Tank

下面是HTML(我把它放在DropBox上，因为它很大)：

https://dl.dropboxusercontent.com/u/7665984/champions.html

Answer 1

不要将更改事件分配给每个复选框，而是使用一个表单和一个按钮来提交表单，并将这些checkboxes.Then做筛选器作为

$('submitbutton').click(function() {
    championList.filter(function(item){
    // filtering logic here 
    });
}