如何使用jquery选择相同的类

时间:2017-09-28 07:29:17

标签: javascript jquery

我有一个列表标签,如果销售有活动类,它应该显示sale_dim div否则rent_dim div应该是可见的

<ul class="saleFlagSelector">
 <li><a href="/ajax-search-forms?sf=true" class="sale ">For sale</a></li>
 <li><a href="/ajax-search-forms?sf=false" class="rent active ">For rent</a></li>
</ul>

<div id="sale_dim">...</div>
<div id="rent_dim">...</div>

这是jquery函数

$(function() {
    $('#sale_dim').show(); 
    $('#rent_dim').hide();
$(ul.saleFlagSelector li a).click(function(){
    if($('.sale').hasClass('active')){
           $('#sale_dim').show(); 
           $('#rent_dim').hide(); 
        } else {
            $('#sale_dim').hide(); 
            $('#rent_dim').show();
        }
    });
});
我能告诉我哪里错了吗?

1 个答案:

答案 0 :(得分:2)

你可以像这样使用它。每当您更改活动类销售或租用锚标签时,您都可以调用此功能。此外,如果要动态添加活动类,请使用jquery .on函数切换div显示。

function hideSaleAndRentDim(){

    if($('.sale').hasClass('active'))
		    {
           $('#sale_dim').show(); 
           $('#rent_dim').hide(); 
        } else if($('.rent').hasClass('active'))
				{
            $('#sale_dim').hide(); 
            $('#rent_dim').show();
        };

}
$(document).ready(function(){
hideSaleAndRentDim();
			});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul class="saleFlagSelector">
     <li><a href="/ajax-search-forms?sf=true" class="sale ">For sale</a></li>
     <li><a href="/ajax-search-forms?sf=false" class="rent active">For rent</a></li>
     </ul>

<div id="sale_dim">Sale Dim</div>
<div id="rent_dim">Rent Dim</div>