0

このフィルターは機能します。ドロップダウンメニューの1つからカテゴリを選択するたびに（例としてアート用語を使用）、フィルタリングされた結果がアニメーションで表示されます。プロジェクトに進む前に、明白なコードの不一致や非互換性がないことを確認したいだけです。または、同じことを実現するためのよりエレガントな方法を知っている場合は、返信してください。ありがとう。これがフィドルです：

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

4

1 に答える 1

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;
}
于 2012-09-20T12:40:12.153 に答える