Foreach 选中的复选框做流沙 jquery 插件

Question

根据http://tutorialzine.com/2011/06/beautiful-portfolio-html5-jquery/ 教程，我正在尝试为我的应用程序实现排序功能。

问题：

我有项目，稍后我将使用流沙 jquery 插件以这种格式排序：

<ul>
<li class="car">Audi A6</li>
<li class="car">Audi A8</li>
<li class="car">BMW 328Ci</li>
<li class="hobby">Skying</li>
<li class="hobby">Skating</li>
<li class="hobby">Running</li>
<li class="food">Pizza</li>
<li class="food">Salat</li>
<li class="food">Chicken</li>
</ul>

然后我有 3 个复选框可用于对要显示的内容和不显示的内容进行排序：

    <ul id="filter_sources">
        <li><input type="checkbox" id="source" value="car" />car</li>
        <li><input type="checkbox" id="source" value="hobby" />hobby</li>
        <li><input type="checkbox" id="source" value="food" />food</li>
    </ul>

我想要做的是为每个选中的复选框运行流沙插件并显示选中的框，所以如果选中 car 和 hobby 复选框以显示汽车和爱好列表

我问这个是因为在教程中他们是这样做的：

$('#filter_sources').live('click',function(e){
        var link = $(this);

        link.addClass('active').siblings().removeClass('active');

        // Using the Quicksand plugin to animate the li items.
        // It uses data('list') defined by our createList function:

        $('#videosList').quicksand(link.data('list').find('li'));
        e.preventDefault();
    });

我为每个检查的输入做了一些尝试，但我没有成功。

Answer 1

经过测试并且可以证明是有效的：

$('input:checkbox').change(
    function(){
        var show = $('input:checkbox:checked').map(function(){
                           return $(this).val();
                   });
        console.log(show);
        $('#list li').each(
            function(){
                if ($.inArray($(this).attr('class'),show) > -1) {
                    $(this).show();
                }
                else {
                    $(this).hide();
                }
            });
    });

JS Fiddle demo.

请注意，为了简单起见并避免使用not() 方法，我选择将id 分配给包含要过滤的元素的列表。

---

已编辑以回应 OP 的评论：

[仅]一个问题，当您在选择其中任何一个后取消选择所有复选框时，所有结果都消失了......

$('input:checkbox').change(
    function(){
        var show = $('input:checkbox:checked').map(function(){
                           return $(this).val();
                   });
        if (show.length > 0){
            $('#list li').each(
                function(){
                    if ($.inArray($(this).attr('class'),show) > -1) {
                        $(this).show();
                    }
                    else {
                        $(this).hide();
                    }
                });
        }
        else {
            $('#list li').show();
        }
    });

JS Fiddle demo。 参考资料：

• attr()。
• change()。
• :checkbox selector。
• hide()。
• :input selector。
• $.inArray()。
• map()。
• show()。