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

仅显示列表jquery中的选定项目

1 个答案: