jQuery - 隐藏和显示具有变量类的 li 项目答案

【问题标题】：jQuery - hide & show li items that have a variable classjQuery - 隐藏和显示具有变量类的 li 项目
【发布时间】：2014-03-27 05:39:57
【问题描述】：

我有一个作为无序列表的下拉菜单。选择一个类别时，我只希望li与与选择的值相同的类，以保持可见。

我曾尝试使用 not 选择器，但在将它与变量类结合使用时遇到了问题 - 这也与选择的值相同。

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

我一直在进行编辑，但这个 jQuery sn-p 不起作用。如何正确编写要保持可见的变量？还是我拉的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 sn-p:

.displayNone {
   display: none;
 }

【问题讨论】：

标签： javascript jquery variables jquery-selectors

【解决方案1】：

试试下面的代码

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

【讨论】：

【解决方案2】：

您不需要在not() 选择器中使用双quotes，因为它们会导致变量被视为string。

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

您拥有的代码将在 not 选择器中传递 '.' +chosenCat，而不是传递 .opt0 或 .opt1 等，具体取决于选择。

您可能还需要在选择的更改事件上执行此操作，如果您只想显示和隐藏，您可以使用显示和隐藏功能。

Live Demo

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

【讨论】：

很好的建议。感谢演示。显然，我是查询新手 - 我需要熟悉更多功能选项。