美文网首页
jquery 单击选中 再次取消

jquery 单击选中 再次取消

作者: 追逐繁星的阿忠 | 来源:发表于2019-01-03 00:29 被阅读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

    相关文章

      网友评论

          本文标题:jquery 单击选中 再次取消

          本文链接:https://www.haomeiwen.com/subject/mijxrqtx.html