Question

我目前正在开展一个学校项目，需要一些关于我的jQuery脚本的帮助。我想用＆lt;过滤整个排名系统选择＆gt;框。

我有以下内容并且有效

<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();
    })

});

但我还想要一个过滤器，比如这个

<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。 Ids是独一无二的。改为使用类。

    <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，我们会得到两个元素如果选择了一圈，我们得到两圈的圈数（即使所有圈子仍被选中）

组合过滤器，以便如果选择all和lap1，则输出正确的列表。

jQuery选择值组合

1 个答案: