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

Posted 2023-03-05

【中文标题】jQuery - 隐藏和显示具有变量类的 li 项目

【英文标题】：jQuery - hide & show li items that have a variable class

【发布时间】：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;
 

【参考方案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();   
);

【讨论】：

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