使用 And 和 Or 语句进行 jQuery 过滤

Question

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

<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>
...

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

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

然后，我需要语言的复选框作为 AND 语句(如果用户选中英语和法语的复选框，则只会显示英语 AND 的项目 法语，然后隐藏所有其他)。

我查看了其他问题，例如 this ，但我不确定如何让类似的东西与两种不同的过滤方法一起使用。这些过滤器需要协同工作，这样，如果用户检查宣传册、英语、法语，它只会显示英语和法语的宣传册。

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

谢谢

Answer 1

您需要向您的输入添加一个类。对于此示例，我将“特定于类型”和“特定于语言”添加到相应的输入中。这是我的未优化但可读的代码。

$(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();
        }
    });
});

和here是一个 fiddle 的例子。所有逻辑均由 jquery 选择器处理。