使用And和Or语句进行jQuery筛选

我必须为一系列产品建立一个复杂的过滤系统。以下是产品列表的基本结构：

<ul id="prod-list">
    <li class="item type-brochure lang-english">Brochure: English</li>
    <li class="item type-folder lang-english lang-french">Folder: English, French</li>
    <li class="item type-bulletin lang-english">Bulletin: English</li>
    <li class="item type-folder lang-english lang-french">Folder: English, French</li>
    <li class="item type-folder lang-english">folder: English</li>
    <li class="item type-brochure lang-english lang-spanish">Brochure: English, Spanish</li>
    <li class="item type-brochure lang-english">Brochure: English</li>
    <li class="item type-folder lang-english">Folder: English</li>
    <li class="item type-bulletin lang-english">Bulletin: English</li>
</ul>

手册：英语
文件夹：英语、法语
公告：英语
文件夹：英语、法语
文件夹：英语
手册：英语、西班牙语
手册：英语
文件夹：英语
公告：英语

然后，我为每个类型和语言过滤器设置了复选框：

<p><strong>Filter by Type:</strong></p>
<p><input type="checkbox" id="type-brochure" /> <label for="type-brochure">Brochure</label></p>
<p><input type="checkbox" id="type-folder" /> <label for="type-folder">Folder</label></p>
<p><input type="checkbox" id="type-bulletin" /> <label for="type-bulletin">Bulletin</label></p>
...
<p><strong>Filter by Language:</strong></p>
<p><input type="checkbox" id="lang-english" /> <label for="lang-english">English</label></p>
<p><input type="checkbox" id="lang-spanish" /> <label for="lang-spanish">Spanish</label></p>
<p><input type="checkbox" id="lang-french" /> <label for="lang-french">French</label></p>
...

按类型筛选：

小册子

文件夹

公告

...
按语言筛选：

英式

西班牙文

法语的

...

如您所见，每个项目都有一个类型，然后是一种语言。一个项目可以有多种类型和语言

基本上，我需要这些类型的复选框作为或语句（如果用户选中小册子和文件夹的复选框，它将列出所有小册子和文件夹，然后隐藏所有其他小册子）

然后，我需要这些语言的复选框充当和语句（如果用户选中英语和法语的复选框，它将只显示英语和法语的项目，然后隐藏所有其他项目）

我研究了其他问题，例如，但我不确定如何使用两种不同的过滤方法来处理类似的问题。过滤器需要协同工作，这样，如果用户检查手册、英文、法文，它将只显示英文和法文的手册

如果有人能就如何实现这一目标提出一些建议，我们将不胜感激

---

谢谢

这里是进行过滤所需的javascript

$(':checkbox').change(FindFilters);

function FindFilters() {
    var filterArray = [];
    //which checkboxes are checked?
    $(':checkbox').each(function () {
        var $this = $(this);
        if ($this.prop('checked')) {
            filterArray.push($this.prop('id'));
        }
    });

    console.log(filterArray);
    FilterList(filterArray);
}
function containsAll(needles, haystack){ 
    for(var i = 0 , len = needles.length; i < len; i++){
        if($.inArray(needles[i], haystack) == -1) return false;
    }
    return true;
}
function FilterList(filters) {
    if (filters.length > 0) {
        $('#prod-list li').each(function () {
            var $this = $(this),
                attributes = $this.prop('class').split(' ');

            if (containsAll(filters,attributes)) {
                $this.slideDown();
            } else {
                $this.slideUp();
            }
        });
    } else {
        $('#prod-list li').slideDown();
    }
}

$（':checkbox'）。更改（FindFilters）；
函数FindFilters（）{
var filterArray=[]；
//选中了哪些复选框？
$（'：复选框'）。每个（函数（）{
var$this=$（this）；
如果（$this.prop（'checked'））{
filterary.push（$this.prop（'id'））；
}
});
控制台日志（过滤器阵列）；
过滤器列表（过滤器阵列）；
}
函数包含所有（针、干草堆）{
对于（变量i=0，len=pines.length；i0）{
$（'#prod list li'）。每个（函数（）{
变量$this=$（this），
attributes=$this.prop（'class'）.split（''）；
if（包含所有（过滤器、属性））{
$this.slideDown（）；
}否则{
$this.slideUp（）；
}
});
}否则{
$（“#产品列表li”）.slideDown（）；
}
}

---

下面是JSFIDLE:

您需要向输入中添加一个类。对于这个示例，我在适当的输入中添加了“特定于类型”和“特定于语言”。这是我的代码，不是经过优化的，而是可读的

$(function(){
    $('input').click(function(){
        $('#prod-list li').hide();
        var languages = '';
        $('.language-specific:checked').each(function(){
            languages += '.' + $(this).attr('id');
        });
        if($('.type-specific:checked').length > 0){
            $('.type-specific:checked').each(function(){
                $(languages+'.'+$(this).attr('id')).show();
                console.log(languages+'.'+ $(this).attr('id'));
            });
        } else {
            $(languages).show();
        }
    });
});

---

这是一个很好的例子。所有逻辑都由jquery选择器处理。

您可以通过以下方式实现：

• 从一个空的jQuery对象开始
• 然后迭代选中的

  类型-

  框并调用以累积或过滤的元素
• 然后迭代选中的

  lang-

  框并调用以减少元素集

比如：

function updateItems()
{
    var $matched;
    var $checkedTypeBoxes = $("input[type='checkbox'][id^='type-']:checked");
    if (!$checkedTypeBoxes.length) {
        $matched = $("#prod-list .item");
    } else {
        $matched = $();
        $checkedTypeBoxes.each(function() {
            // Add items of checked type.
            $matched = $matched.add("#prod-list .item." + this.id);
        });
    }
    $("input[type='checkbox'][id^='lang-']:checked").each(function() {
        // Filter out items that don't expose checked language.
        $matched = $matched.filter("." + this.id);
    });

    $("#prod-list .item").hide();
    $matched.show();
}

$(document).ready(function() {
    updateItems();
    $("input[type='checkbox']").change(function() {
        updateItems();
    });
});

---

您可以在中测试此解决方案。

效果很好，但如果选择两种类型，则应同时显示这两种类型（需要使用OR语句而不是AND语句，但仅适用于这些类型）。是的，我很抱歉。我误解了你的情况。我会很快修复它。这也很有效，但我希望这些语言可以自己过滤（无需选择类型）。因此，如果用户只检查法语，它将显示所有法语内容，而不考虑类型。@scferg5，这确实是可能的，回答并相应地更新fiddle。