0

私は現在、学校のプロジェクトに取り組んでおり、jQuery スクリプトの助けが必要です。< select >ボックスでランキングシステム全体をフィルタリングしたい。

私は以下を持っていて、それは動作します

<select>
    <option value="all">All</option>
    <option value="cars">Cars</option
</select>

<div id="all" class="ranking-item">All rankings</div>
<div id="cars" class="ranking-item">Cars rankings</div>

jQueryで

$(document).ready(function() {

    $(".ranking-item").not(":first").hide(); //prevent seeing nothing

    $("select").change(function() {

    $('.ranking-item').hide();
    var targetId = $(this).val();
    $('#'+targetId).show();
    })

});

しかし、このように、もう1つのフィルターが必要です

<select>
    <option value="all">All</option>
    <option value="cars">Cars</option
</select>

<select>
    <option value="lap1">Lap 1</option>
    <option value="lap2">Lap 2</option
</select>

期待される出力は

<div id="all lap1" class="ranking-item">All rankings</div>
<div id="all lap2" class="ranking-item">All rankings</div>
<div id="cars lap1" class="ranking-item">Cars rankings</div>
<div id="cars lap2" class="ranking-item">Cars rankings</div>

しかし、これはうまくいきません...

どうすればこれを機能させることができると思いますか? よろしくお願いします

4

1 に答える 1

0

複数の ID を持つことはできません。ID は一意です。代わりにクラスを使用してください。

    <select>
        <option value="all">All</option>
        <option value="cars">Cars</option>
    </select>

    <select>
        <option value="lap1">Lap 1</option>
        <option value="lap2">Lap 2</option>
    </select>

    <div class="ranking-item all lap1">All rankings lap1</div>
    <div class="ranking-item all lap2">All rankings lap2</div>
    <div class="ranking-item cars lap1">Cars rankings lap1</div>
    <div class="ranking-item cars lap2">Cars rankings lap2</div>

    <script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
    <script>

        $(document).ready(function() {

            $(".ranking-item").not(":first").hide(); //prevent seeing nothing

            $("select").change(function() {

                $('.ranking-item').hide();
                var targetClass = $(this).val();
                $('.'+targetClass).show();

            })

        });

    </script>

また、その背後にあるロジックについても考えてください。選択がフィルターとして使用されている場合は、すべてのフィルターを使用してすべてのデータ リストをフィルター処理する必要があります (または他のフィルターをリセットすることもできます)。

例えば：

all が選択されている場合、すべての 2 つの要素を取得します。lap が選択されている場合、lap の 2 つの要素を取得します (all がまだ選択されている場合でも)

all と lap1 が選択されている場合に正しいリストが出力されるように、フィルターを組み合わせます。

于 2013-04-19T15:38:46.933 に答える