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

jQuery - hide＆amp;显示具有变量类的li项

2 个答案: