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是一个小提琴的例子。所有逻辑都由jquery选择器处理。

Answer 2

您可以通过以下方式实现这一目标：

以空的jQuery对象开头，
然后遍历已检查的type-框并调用add()以累积OR过滤的元素，
然后遍历已检查的lang-框并调用filter()以减少元素集。

类似的东西：

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

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

Answer 3

以下是进行过滤所需的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();
    }
}

这里是jsfiddle：http://jsfiddle.net/Morlock0821/nxTPN/

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

3 个答案: