jquery - jQuery选择值组合

Question

我目前正在做一个学校项目，需要一些关于我的 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>

但这不起作用...

任何猜测我怎样才能让它工作？谢谢转发

Answer 1

你不能有多个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 和 lap1，它会输出正确的列表。