基本都有效
$(function(){
$("ul > li").click(function(){
$.each($('ul > li'), function(i, o){
if($(this).hasClass('className')){
$(this).removeClass('className');
}
});
$(this).addClass('className');
});
});
ul li a 三级嵌套的模式
<li onclick="Categorytw(this)">
<div class="choose" id="dress-size1">
<form action="" method="get">
<div class="choosebox ">
<ul class="clearfix chooseSex">
<li>
<a href="javascript:void(0);" class="size_radioToggle" id="0"><span class="value">不限</span></a>
</li>
<li>
<a href="javascript:void(0);" class="size_radioToggle" id="1"><span class="value">公</span></a>
</li>
<li>
<a href="javascript:void(0);" class="size_radioToggle" id="2"><span class="value">母</span></a>
</li>
</ul>
</div>
</form>
</div>
</li>
js
$(".chooseSex li a").click(function(e){
$.each($('.chooseSex > li >a'), function(i, o){
if($(this).hasClass('current')){
alert(11);
$(this).removeClass('current');
}
});
$(this).addClass('current');
console.log('event', e.currentTarget.id);
});
或者:
$(".chooseSex li a").click(function(e){
if(!$(this).hasClass("current")){
//$(this).addClass("active"); //多选
//$(this).addClass("current").parent('li').siblings().find('a').removeClass("current"); //单选
$(this).parent('li').siblings().find("a").removeClass("current");
$(this).addClass("current");
}else{
$(this).removeClass("current");
}
/*console.log('event', e.currentTarget.id);
let targId= e.currentTarget.id;
searchObj.tagCategoryIds = targId;*/
});
说明:
.parent('li')是找到了li
.children('a')找到了li下面的a标签
.siblings()找到a标签的兄弟标签,但是a标签没有兄弟标签
错误写法展示如下:
$(".chooseSex li a").click(function(e){
if(!$(this).hasClass("current")){
//$(this).addClass("active"); //多选
//$(this).addClass("current").parent('li').children('a').siblings().removeClass("current"); //单选
$(this).addClass("current").siblings('a').removeClass("current"); //单选
}else{
$(this).removeClass("current");
}
你的
$(this).parent('li').children('a').siblings().removeClass("current"); //单选
我的
$(this).parent('li').siblings().find("a").removeClass("current");
网友评论