Jquery 实时搜索和复选框过滤器、网格

Question

我正在寻找一种方法来实时搜索我的网格+要过滤的复选框。我有一个包含学生的网格(照片和姓名)。我想要的是有一个复选框，可以过滤学生所在的不同类(class)。还有一个搜索栏，我可以在其中输入学生姓名。

我的两个元素都在工作，一个搜索栏和一个要过滤的复选框。但他们不一起工作。

当我输入 peter 时，它会像我想要的那样显示 peter，但是当我检查 A 时，我会看到 A 类的所有学生。当然，我仍然应该只看到 peter。当我取消选中 A 时，什么也没有显示。我该怎么做才能让两者一起工作？看我的 fiddle 。

http://jsfiddle.net/wpxajkcw/

$(document).ready(function () {
    $("#filter").keyup(function () {

        // Retrieve the input field text and reset the count to zero
        var filter = $(this).val(),
            count = 0;

        // Loop through the comment list
        $("li").each(function () {

            // If the list item does not contain the text phrase fade it out
            if ($(this).text().search(new RegExp(filter, "i")) < 0) {
                $(this).fadeOut(0);

                // Show the list item if the phrase matches and increase the count by 1
            } else {
                $(this).show();
                count++;
            }
        });

        // Update the count
        var numberItems = count;
        $("#filter-count").text("Number of Comments = " + count);
    });
});

$(document).ready(function () {
    $('.studentList > li.' + $(this).attr('rel')).show();

    $('div.tags').find('input:checkbox').live('click', function () {
        $('.studentList > li').hide();
        $('div.tags').find('input:checked').each(function () {
            $('.studentList > li.' + $(this).attr('rel')).show();
        });
    });
});

Answer 1

您可以为已隐藏的学生添加类(class)并从显示行为中排除:

$(document).ready(function () {
    $("#filter").keyup(function () {

        // Retrieve the input field text and reset the count to zero
        var filter = $(this).val(),
            count = 0;

        // Loop through the comment list
        $("li").each(function () {

            // If the list item does not contain the text phrase fade it out
            if ($(this).text().search(new RegExp(filter, "i")) < 0) {
                $(this).fadeOut(0).addClass('hidden');

                // Show the list item if the phrase matches and increase the count by 1
            } else {
                $(this).show().removeClass('hidden');
                count++;
            }
        });

        // Update the count
        var numberItems = count;
        $("#filter-count").text("Number of Comments = " + count);
    });
});

$(document).ready(function () {
    $('.studentList > li.' + $(this).attr('rel')).show();

    $('div.tags').find('input:checkbox').live('click', function () {
        $('.studentList > li').hide();
        $('div.tags').find('input:checked').each(function () {
            $('.studentList > li.' + $(this).attr('rel')).not('.hidden').show();
        });
    });
});

jsfiddle:http://jsfiddle.net/wpxajkcw/

要解决取消选中 cehckbox 的问题:

$(document).ready(function () {
    $('.studentList > li.' + $(this).attr('rel')).show();

    $('div.tags').find('input:checkbox').live('click', function () {

        if($('div.tags').find('input:checkbox:checked').length > 0){
        $('.studentList > li').hide();
        $('div.tags').find('input:checked').each(function () {
            $('.studentList > li.' + $(this).attr('rel')).not('.hidden').show();
        });
        } else {
            $('.studentList > li').not('.hidden').show();
        }
    });
});

更新了 jsfiddle: http://jsfiddle.net/wpxajkcw/1/