Jquery--使用购物车的加减

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>

</head>
<body>
<!-- 单价 -->
<div class="p-price">$12.60</div>

<div class="p-num">
<div class="quantity-form">
<a href="javascript:;" class="cecrement">-</a>
<input type="text" class="itxt" value="1">
<a href="javascript:;" class="increment">+</a>
</div>
</div>

<!-- 总数 -->
<div class="p-sum">$12.60</div>
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<script type="text/javascript">
//点击加号的
$(".increment").click(function(){
//
var n =$(this).siblings(".itxt").val();
n++;
$(this).siblings(".itxt").val(n);
//3.计算小计模块，根据文本框的值乘当前的价格 就是商品的小计
var p=$(this).parents(".p-num").siblings(".p-price").html();
console.log(p);
$(this).parents(".p-num").siblings(".p-sum").html("$"+(p*n).toFixed(2));

});

//点击减号的
$(".cecrement").click(function(){
//
var n =$(this).siblings(".itxt").val();
if(n==1){
return false;
}
n--;
$(this).siblings(".itxt").val(n);

var p=$(this).parents(".p-num").siblings(".p-price").html();
console.log(p);
$(this).parents(".p-num").siblings(".p-sum").html("$"+(p*n).toFixed(2));
});

// 3.直接在input修改的
$(".itxt").change(function(){
//先拿到文本框里面的值，乘以当前商品的单价
var n=$(this).val();
//单价的商品
var p=$(this).parents(".p-num").siblings(".p-price").html();
//console.log(p);
p=p.substr(1);
$(this).parents(".p-num").siblings(".p-sum").html("$"+(p*n).toFixed(2));
})


</script>


</body>
</html>

posted @ 2021-10-24 16:10  漫漫长路</>  阅读(88)  评论(0)    收藏  举报