jquery - 使用 jQuery 过滤搜索结果——请仔细检查我的代码

Question

此过滤器有效。每次从下拉菜单中选择一个类别（以艺术术语为例），过滤后的结果都会以动画形式显示。在我继续项目之前，我只是想确保没有明显的代码差异或不兼容性。或者，如果您知道实现相同目标的更优雅的方式，请回复。谢谢。这是小提琴：

http://jsfiddle.net/Earl1234/qm5Yj/2/

Answer 1

好吧，您#maindiv没有使用正确的 HTML 语法，而且，当它使用时，它会弄乱布局。

jQuery 不应该更像这样吗？

演示：http: //jsfiddle.net/SO_AMK/yrwVZ/

jQuery：

$(document).ready(function() {
    $("#genre").change(function() {
        var selGenre = $(this).val();
        var selSize = $("#size").val();
        $("#paintings").slideUp(function() {
            $('.eaPaintDiv, .error').hide();
            $('.eaPaintDiv[class*=' + selGenre + '][class*=' + selSize + ']').show();
            if ($('.eaPaintDiv[class*=' + selGenre + '][class*=' + selSize + ']').length == 0) {
                $(".error").show();
            }
            $("#paintings").slideDown();
        });
    });
    $("#size").change(function() {
        var selGenre = $("#genre").val();
        var selSize = $(this).val();
        $("#paintings").slideUp(function() {
            $('.eaPaintDiv, .error').hide();
            $('.eaPaintDiv[class*=' + selSize + '][class*=' + selGenre + ']').show();
            if ($('.eaPaintDiv[class*=' + selSize + '][class*=' + selGenre + ']').length == 0) {
                $(".error").show();
            }
            $("#paintings").slideDown();
        });
    });
});​

为了外观，我添加了错误。您的过滤有点多余，如果您最初只隐藏选定的画作，可能会搞砸。因此，您可以将它们全部隐藏，然后显示正确的。

PS你可以使用我的浮动清除方法，而不是一个空的DIV，像这样：

#paintings:after {
    display: block;
    content: " ";
    height: 0;
    clear: both;
}