javascript - 如何使用 jQuery 按多个条件正确过滤列表？

Question

我想在我的 DOM 上执行以下操作:

通过多个控件(组合)过滤列表:

• 复选框
• 选择框

• 自由文本输入(例如 http://vdw.github.io/HideSeek/ )

  例如，用户可以从选择框中选择一个城市，从而过滤显示的项目。在输入字段中输入内容时，选择的过滤器仍然存在，通过输入的文本进一步过滤显示的项目。

我通常会手工编写一些内容来组合不同选择框中的多个选择，但这并不理想。另外，对于“自由文本”过滤器，我一直使用 jQuery 插件，它们倾向于在您开始输入时重置选择。

对于表格，我使用 datatables插件，它带来了多个过滤器。它的功能极其丰富，但也相当笨重 - 专为表格设计，而不是任何类型的列表。

关于如何实现这一目标的一般建议/概述是什么？

PS:这就是我现在的做法。 a)它是极其专有的，b)我还没有设法将它与文本过滤器结合起来:

function showItems(selectedCanton,showTypeOne,showTypeTwo){
    var typeOneSelector = '';
    var typeTwoSelector = '';

    if (selectedCanton=='all'){
        var cantonSelector = '';
    }
    else {
        var cantonSelector = '.list-item[data-canton="'+selectedCanton+'"]';
    }

    if (showTypeOne){
        if (showTypeTwo){
            selector = cantonSelector;
            //selector = cantonSelector+'[data-type="one"],'+cantonSelector+'[data-type="two"]';
        }
        else {
            selector = cantonSelector+'[data-type="one"]';
        }
    }
    else if (showTypeTwo){
        selector = cantonSelector+'[data-type="two"]';
    }
    $('.list-item').hide();

    console.log(selector);
    $(selector).show(); 
}

$(document).ready(function($){

        $(".filter-select").change(function() {     
            var selectedCanton = $("#canton").val(); 
            var showTypeOne = $("#type-one").prop('checked');
            var showTypeTwo = $("#type-two").prop('checked'); 
            showItems(selectedCanton,showTypeOne,showTypeTwo);
        });
});

Answer 1

可以使用jquery的过滤功能。

尝试类似的事情

$('.list-item').hide();

$('.list-item').filter(function (index, e) {
    var condition = true;
    var el = $(e);

    if(showTypeOne)
    {
      condition = condition && (el.data("type") === "one");
    }

    if(showTypeTwo)
    {
        condition = condition && (el.data("type") === "two");
    }

    if(selectedCanton!='all')
    {
        condition = condition && (el.data("canton") === selectedCanton);
    }

    return condition;
 })
.show();

您可以通过这种方式轻松添加文本过滤器..

工作样本:http://jsfiddle.net/CufMp/1/