3

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

<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语句（如果用户选中 Brochure 和 Folder 的复选框，它将列出所有 Brochures和文件夹，然后隐藏所有其他）。

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

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

如果有人对如何实现这一点有一些建议，将不胜感激。

谢谢

4

3 回答 3

3

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

$(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 选择器处理。

于 2012-12-17T16:04:33.447 回答
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();
    });
});

你可以在这个 fiddle中测试这个解决方案。

于 2012-12-17T16:07:32.587 回答
1

这是进行过滤所需的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/

于 2012-12-17T16:00:39.370 回答