zhuanronghan6702
YXly
2017-09-06 03:03
采纳率: 100%
浏览 3.5k

jq,点击相同div,子节点添加或删除class

jq 几个相同class的div 对应点击div的子节点 添加class 其他的removeclass,
写了很多办法,就是不报错。点了也没有反应 ,一点反应都没有。
这是为什么??点击paylist-item,添加或删除item-selected

div:

 <aside data-v-522bb7c6="" class="paylist">
                <header data-v-522bb7c6="" class="paylist-header">支付方式</header>
                <div data-v-522bb7c6="" class="paylist-item">
                  <span data-v-522bb7c6="">在线支付</span>
                  <svg data-v-522bb7c6="" class="icon-select item-selected">
                    <use data-v-522bb7c6="" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#select"></use>
                  </svg>
                </div>
                <div data-v-522bb7c6="" class="paylist-item">
                  <span data-v-522bb7c6="">签约记账</span>
                  <svg data-v-522bb7c6=""  class="icon-select">
                    <use data-v-522bb7c6="" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#select"></use>
                  </svg>
                </div>
                <div data-v-522bb7c6="" class="paylist-item">
                  <span data-v-522bb7c6="">线下付款</span>
                  <svg data-v-522bb7c6="" class="icon-select">
                    <use data-v-522bb7c6="" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#select"></use>
                  </svg>
                </div>
              </aside>

javascript:

 <script type="text/javascript">
            $(".paylist-item").click(function(){
                    $(".paylist-item").siblings().children(".icon-select").removeClass("item-selected");//siblings是循环遍历
                $(this).children(".icon-select").addClass("item-selected");
            })
        </script>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

4条回答 默认 最新

  • showbo
    已采纳

    svg用children选不出来,不懂是不是bug,find就行,样式用attr,remove/addClass也无效

    
        $(".paylist-item").click(function () {
            $(".paylist-item").siblings().find(".icon-select").attr('class', 'icon-select');//siblings是循环遍历
            $(this).find(".icon-select").attr('class', "icon-select item-selected");
        })
    
    点赞 评论
  • qq_32763061
    猿李 2017-09-06 03:17

    你的console窗口 没有提示吗

    点赞 评论
  • u014423965
    tonysmithone 2017-09-06 03:31

    你jQuery中用了addclass()和removeclass()这两个方法,添加或删除样式,那你标签里就不能写这个两个样式。把svg标签里的item-selected类去掉就好了。

    点赞 评论
  • justinytsoft
    justinytsoft 2017-09-06 03:43

    $(".paylist-item").on("click", function(){
    $(".paylist-item").siblings().children(".icon-select").removeClass("item-selected");//siblings是循环遍历
    $(this).children(".icon-select").addClass("item-selected");
    })

    点赞 评论

相关推荐