Question

我正在尝试制作它，以便我可以按多个项目进行过滤，包括当前搜索或排序的内容。目前，如果我使用单个项目进行过滤以及是否已对其进行排序或搜索，则它可以正常工作，但它不适用于两个或更多过滤器。我使用复选框，以便用户可以选择要过滤的内容。当我检查第二个过滤器时，将删除先前的过滤器。我检查了ListJS网站，但他们只给出了函数/ API，但没有关于如何使用它们的示例。我尝试在stackoverflow上的另一个问题上使用其中一个答案但是当我使用过滤器时它返回了一个空白查询。我希望能够搜索一些例子：男子冠军，免费比赛，以及坦克或类似的东西。

以下是我要修复的页面：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

不要将更改事件分配给每个复选框，而是使用表单和按钮提交带有这些复选框的表单。然后过滤为

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

Listjs多重过滤和排序

1 个答案: