2 zhuanronghan6702 zhuanronghan6702 于 2017.09.06 11:03 提问

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
showbo   Ds   Rxr 2017.09.06 11:24
已采纳

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");
    })
zhuanronghan6702
zhuanronghan6702 谢谢了,按你的方法解决了。我说呢 children没用,,后来得到了标签 但是又不能操作,也不报错。原来用的attr 非常感谢
3 个月之前 回复
qq_32763061
qq_32763061   2017.09.06 11:17

你的console窗口 没有提示吗

zhuanronghan6702
zhuanronghan6702 没有任何提示
3 个月之前 回复
u014423965
u014423965   2017.09.06 11:31

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

zhuanronghan6702
zhuanronghan6702 最后出来了 就是children方法没用,然后addClass和removeClass。对于这个svg标签也是没用的。我说能得到svg标签 就是不能对svg进行操作呢
3 个月之前 回复
justinytsoft
justinytsoft   2017.09.06 11:43

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

zhuanronghan6702
zhuanronghan6702 children。选不出来 2楼的方法可以 ,直接用find。attr 类似于addclass removeclass 都是没用的,谢谢你
3 个月之前 回复
Csdn user default icon
上传中...
上传图片
插入图片