只顯示列表中的選定項目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 
});