javascript - 仅从列表 jquery 中显示选定的元素

Question

我有一个汽车列表，目前它们都显示在页面上。

我所追求的功能是当我点击子菜单中的一个汽车组时，例如 A1，应该只显示与该汽车组关联的汽车。其余的应该隐藏起来。

感谢任何帮助。

HTML:

<div id="menu-strip">
    <ul class="nav nav-pills hr">

        @foreach (var item in Model.ModelGroups)
        {

            <li class="active">

                <a href="javascript:void(0)" class="menu-item" data-modelid=@item.ModelGroupID>@item.Description</a>

            </li>

        }

    </ul>
</div> }

Answer 1

你可以用类来做这类事情。

因此，您为带有汽车的元素提供了这种 HTML 结构:

<div class="mercedes car"> Merc 1 </div>
<div class="bmw car"> BMW 1 </div>
<div class="bmw car"> BMW 2 </div>
<div class="mercedes car"> Merc 2 </div>
<div class="mercedes car"> Merc 3 </div>

然后你可以有一个像这样的菜单:

<div class="menu-item" data-car="mercedes">Mercedes</div>
<div class="menu-item" data-car="bmw">BMW</div>

然后你的 JS 可能是:

jQuery('.menu-item').on('click', function (e) {
   jQuery('.car').hide(); // Hide all cars
   var carClass = jQuery(this).attr('data-car');
   jQuery('.' + carClass).show(); // Show the car brand we want
});