0

我正在努力做到这一点，以便我可以按多个项目进行过滤，包括当前搜索或排序的内容。目前，如果我使用单个项目进行过滤并且对其进行排序或搜索，则它可以工作，但它不适用于两个或更多过滤器。我使用复选框，以便用户可以选择他们想要过滤的内容。当我检查第二个过滤器时，前一个过滤器被删除。我检查了 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

4

1 回答 1

0

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

$('submitbutton').click(function() {
    championList.filter(function(item){
    // filtering logic here 
    });
}
于 2014-12-15T10:24:57.647 回答