Jquery 节点选择器


  <div style="margin: 5% 2.5% 5% 2.5%; margin-top: 7px; background-color: green; height: 90%; line-height: 35px; color: white; font-size: 14px" class="add" name="0" price="15"><strong class="temp">添加</strong></div>
   $(".add").click(function () {
                if ($(this).attr('name') == "0") {
                    $(this).attr('name', "1");
                    $(this).css("background-color", "gray");
                    $(this).children(".temp").html("取消");
                    //计算总价
                    var a = parseFloat($(".price").text());
                    a = a + parseFloat($(this).attr('price'));
                    $(".price").html(a);
                }
                else
                {
                    $(this).attr('name', "0");//name的值做标记
                    $(this).css("background-color", "green");
                    $(this).children(".temp").html("添加");
                    //计算总价
                    var a = parseFloat($(".price").text());
                    a = a - parseFloat($(this).attr('price'));
                    $(".price").html(a);
                }
              
               
            });

 $(this).attr('name');获取当前那个节点里面的name的值

$(this).attr('name',"123");给当前那个节点里面的name的赋值为 123



  $(this)=====>好用!!

  <div style="margin: 5% 2.5% 5% 2.5%; margin-top: 7px; background-color: green; height: 90%; line-height: 35px; color: white; font-size: 14px" ><strong class="cut" class="add" name="0" price="15">- </strong><span class="count">0</span><strong class="add" class="add" name="0" price="15"> +</strong></div>


 $(".add").click(function () {
                $(this).prev(".count").html("222");
                //计算总价
                var a = parseFloat($(".price").text());
                a = a + parseFloat($(this).attr('price'));
                $(".price").html(a);
              
               
            });

这里面有几个主要的点:

1 this的用法

 2 在this里面获取同级节点,父结点  子节点  

 $(this).prev(".count").html("222");
他的意思是查找这个 add 的同级(前面位置 class为 count的)节点

 $(this).next(".count").html("222");
他的意思是查找这个 add 的同级(后面位置 class为 count的)节点

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值