jQuery - 隱藏並顯示具有可變類的項目

Question

我有一個下拉菜單作爲無序列表。當選擇一個類別時，我只希望li與選擇的值相同的類保持可見。

我已經嘗試使用not選擇器，但我無法與變量類結合使用它 - 這也與選擇的值相同。

$(document).ready(function(){ 
    var chosenCat = $('select[name="mapCat"]').val(); 
    var className = $('#mapContent ul li.'); 
    $("#mapContent ul li").not("'.' +chosenCat").addClass("displayNone"); 
}); 

我一直在編輯，但這個jQuery代碼片段不工作。如何正確編寫我想保持可見的變量？或者是我拉動的val()中的錯誤？

的HTML：

<select name="mapCat"> 
    <option value="opt0" selected="selected">SELECT A CATEGORY</option> 
    <option value="opt1">UNIVERSITIES</option> 
    <option value="opt2">HOSPITALS</option> 
</select> 
<div id="mapContent"> 
    <ul> 
     <li class="opt1">University X</li> 
     <li class="opt2">Hospital X</li> 
     <li class="opt2">Hospital Y</li> 
     <li class="opt1">University Y</li> 
     <li class="opt1">University Z</li> 
     <li class="opt2">Hospital Z</li> 
    </ul> 
</div> 

CSS代碼片段：

.displayNone { 
    display: none; 
} 

Answer 1

試試下面的代碼

$(document).ready(function() {   
     $('select[name="mapCat"]').change(function(){ 
      var chosenCat =$(this).val();  
      $('#mapContent ul li').hide(); 
      $('#mapContent ul li.'+chosenCat).show(); 
     }); 
     }); 

Answer 2

你不需要雙quotes在not()選擇，因爲它們會導致變量要爲string處理。

$("#mapContent ul li").not('.' + chosenCat).addClass("displayNone"); 

你的代碼將通過在'.' +chosenCat沒有選擇器強似.opt0或.opt1等，這取決於選擇。

另外，您可能需要在選擇的更改事件時執行此操作，而且如果您只是想顯示和隱藏，則可以使用顯示和隱藏功能。

Live Demo

$('select[name="mapCat"]').change(function(){ 
    var chosenCat = $(this).val(); 
    $("#mapContent ul li").show() 
    $("#mapContent ul li").not('.' + chosenCat).hide(); 
});