jquery 单击选中 再次取消

2019-01-03  本文已影响2人  追逐繁星的阿忠

基本都有效

 $(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");

或者:https://www.cnblogs.com/lr393993507/p/6078063.html

上一篇 下一篇

猜你喜欢

热点阅读