Jquery切换活动类

Question

我尝试将addClass和removeClass添加到div mall_alldeal_cat_active，以指向所选的字母。但是，当我单击其中一个字母时，所有div addClass一起显示。有谁能帮我查一下我犯了什么错误？

＆＃13;

＆＃13;

$('.mall_alldeal_cat_title li').click(function(e){
	e.preventDefault();
	var $this = $('.mall_alldeal_cat_title li div');	
	$('.mall_alldeal_cat_title li div').removeClass('mall_alldeal_cat_active');
	$this.addClass('mall_alldeal_cat_active');
  
});

＆＃13;

.mall_alldeal_cat_title{
	background:#fff;
	padding-left:30px;
	border-bottom:1px solid #ccc;
}
.mall_alldeal_cat_title li{
	list-style:none;
	display:inline-block;
	padding:10px 10px 5px 10px;
	cursor:pointer;	

}
.mall_alldeal_cat_active{
	width: 0; 
	height: 0; 
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 5px solid black;
	position:absolute;
	
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mall_alldeal_cat_title">
                    	<li>A<div class="mall_alldeal_cat_active"></div></li>
                       	<li>B<div class=""></div></li>
                        <li>C<div class=""></div></li>
                        <li>D<div class=""></div></li>
                    </div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您应该使用this，即您点击的li，然后在其中找到div。

var $this = $('.mall_alldeal_cat_title li div');仍匹配.mall_alldeal_cat_title内的所有div元素。

$('.mall_alldeal_cat_title li').click(function(e){
	e.preventDefault();
	$('.mall_alldeal_cat_title li div').removeClass('mall_alldeal_cat_active');
	$(this).find('div').addClass('mall_alldeal_cat_active');
  
});

.mall_alldeal_cat_title{
	background:#fff;
	padding-left:30px;
	border-bottom:1px solid #ccc;
}
.mall_alldeal_cat_title li{
	list-style:none;
	display:inline-block;
	padding:10px 10px 5px 10px;
	cursor:pointer;	

}
.mall_alldeal_cat_active{
	width: 0; 
	height: 0; 
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 5px solid black;
	position:absolute;
	
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mall_alldeal_cat_title">
                    	<li>A<div class="mall_alldeal_cat_active"></div></li>
                       	<li>B<div class=""></div></li>
                        <li>C<div class=""></div></li>
                        <li>D<div class=""></div></li>
                    </div>

Answer 2

您的选择器正在选择所有li元素。尝试这样的方法来获取li兄弟姐妹并删除他们的类，只将它添加到当前的类中。

＆＃13;

＆＃13;

$('.mall_alldeal_cat_title li').click(function(e){
	e.preventDefault();
	var $this = $(this);
	$this.siblings().find('div').removeClass('mall_alldeal_cat_active');
	$this.find('div').addClass('mall_alldeal_cat_active');
  
});

＆＃13;

.mall_alldeal_cat_title{
	background:#fff;
	padding-left:30px;
	border-bottom:1px solid #ccc;
}
.mall_alldeal_cat_title li{
	list-style:none;
	display:inline-block;
	padding:10px 10px 5px 10px;
	cursor:pointer;	

}
.mall_alldeal_cat_active{
	width: 0; 
	height: 0; 
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 5px solid black;
	position:absolute;
	
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mall_alldeal_cat_title">
                    	<li>A<div class="mall_alldeal_cat_active"></div></li>
                       	<li>B<div class=""></div></li>
                        <li>C<div class=""></div></li>
                        <li>D<div class=""></div></li>
                    </div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以使用children()。

此代码可以帮助您。

$('.mall_alldeal_cat_title li').click(function(e){
        e.preventDefault();
        //var $this = $('.mall_alldeal_cat_title li div');  
        $('.mall_alldeal_cat_title li div').removeClass('mall_alldeal_cat_active');
        $(this).children().addClass('mall_alldeal_cat_active');
    });