Question

我在页面中使用此代码

<div class="filterGroup">
                  <ul>              
                    <li><label class="checkbox">Argentina<input type="checkbox"></label></li>                       
                    <li class="moreFilters"><label class="checkbox">Spain<input type="checkbox"></label></li> 
                    <li class="moreFilters"><label class="checkbox">Turkey<input type="checkbox"></label></li> 
                    <li class="moreFiltersLink"><a href="javascript:void(0)">more</a></li> 
                </ul>
            </div>

这将切换它

   $('.moreFiltersLink').click(function () {
        $('.moreFilters').toggle();         
    });

我遇到的问题是我想说你的5块 <div class="filterGroup">

这意味着当我点击链接所有块切换。

任何人都可以帮助我将此更改为仅在您所在的div中切换类。

Answer 1

只需获取最近的.moreFiltersLink，找到它.moreFilters，并切换它们：

$('.moreFiltersLink').click(function () {
    $(this).closest('.filterGroup').find('.moreFilters').toggle();         
});

Answer 2

使用jQuery选择器，您可以使用以下命令切换它们：

$('.filterGroup .moreFilters').toggle();

该选择器将选择具有类moreFilters的所有元素，这些元素位于具有类filterGroup的元素中。

我认为最好也是最可靠的方法是为每个人分配一个id并用以下方法切换：

$('#filterGroupId .moreFilters').toggle();

Answer 3

使用siblings选择最近的元素

$(function(){
  $('.moreFiltersLink').click(function () {
        $(this).siblings('.moreFilters').toggle();         
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filterGroup">
	<ul>              
		<li><label class="checkbox">Argentina<input type="checkbox"></label></li>                       
		<li class="moreFilters"><label class="checkbox">Spain<input type="checkbox"></label></li> 
		<li class="moreFilters"><label class="checkbox">Turkey<input type="checkbox"></label></li> 
		<li class="moreFiltersLink"><a href="javascript:void(0)">more</a></li> 
	</ul>
</div>
<div class="filterGroup">
	<ul>              
		<li><label class="checkbox">Argentina<input type="checkbox"></label></li>                       
		<li class="moreFilters"><label class="checkbox">Spain<input type="checkbox"></label></li> 
		<li class="moreFilters"><label class="checkbox">Turkey<input type="checkbox"></label></li> 
		<li class="moreFiltersLink"><a href="javascript:void(0)">more</a></li> 
	</ul>
</div>
<div class="filterGroup">
	<ul>              
		<li><label class="checkbox">Argentina<input type="checkbox"></label></li>                       
		<li class="moreFilters"><label class="checkbox">Spain<input type="checkbox"></label></li> 
		<li class="moreFilters"><label class="checkbox">Turkey<input type="checkbox"></label></li> 
		<li class="moreFiltersLink"><a href="javascript:void(0)">more</a></li> 
	</ul>
</div>
<div class="filterGroup">
	<ul>              
		<li><label class="checkbox">Argentina<input type="checkbox"></label></li>                       
		<li class="moreFilters"><label class="checkbox">Spain<input type="checkbox"></label></li> 
		<li class="moreFilters"><label class="checkbox">Turkey<input type="checkbox"></label></li> 
		<li class="moreFiltersLink"><a href="javascript:void(0)">more</a></li> 
	</ul>
</div>
<div class="filterGroup">
	<ul>              
		<li><label class="checkbox">Argentina<input type="checkbox"></label></li>                       
		<li class="moreFilters"><label class="checkbox">Spain<input type="checkbox"></label></li> 
		<li class="moreFilters"><label class="checkbox">Turkey<input type="checkbox"></label></li> 
		<li class="moreFiltersLink"><a href="javascript:void(0)">more</a></li> 
	</ul>
</div>

显示和隐藏切换js

3 个答案: