静态页面购物车数量加减功能实现

Posted 2021-01-18 hym33

1.进行“加”的效果时：一定要注意：获取单价和数量是禁止使用id或者class选择器，要使用add的选择器去寻找单价和数量的值

html：

<div class="col-xs-7">
<p>什锦小郡肝套餐</p>
<p style="height: 90px"></p>
<p style="color: red;font-size: 45px;">
<span>￥</span>
<span class="price">16</span>
<span class="glyphicon glyphicon-plus add"></span>
<i>0</i>
<span class="glyphicon glyphicon-minus minud"></span>
</p>
</div>

JS：

// 加号的效果
$(‘.add‘).click(function(){

// 1.先获取份数
var n = $(this).next().text();
// 2.将获取的份数转化为数字格式
var num = parseInt(n) + 1;
if(num == 0){return; }
// 3.将减号和份数元素显示
$(this).next().show();
$(this).next().next().show();
// 4.将份数赋值给i标签
$(this).next().text(num);
// 5.获取单价
var price = $(this).prev().text();
// 6.获取当前所选总价
var a = $(".totalpriceshow").html();
// 7.计算当前所选总价 toFixed(num):js表示将Number四舍五入为指定的小数位数的数字
$(".totalpriceshow").html((a * 1 + price * 1).toFixed(2));
});

// 减号的效果
$(‘.minud‘).click(function(){

// 1.获取份数
var n = $(this).prev().text();
// 2.将份数转化为数字格式
var num = parseInt(n) - 1;
if(num < 0){

$(this).prev().text()-1;
}
// 4.将份数赋值给i标签
$(this).prev().text(num);
// 5.获取单价
var price = parseInt($(‘.price‘).text());
var price = $(this).prev().prev().prev().text();
// 6. 获得当前的总价
var totalPrice =parseInt($(".totalpriceshow").html());

// 7.将总价赋值给尾部的总价元素标签
$(".totalpriceshow").html((totalPrice - price).toFixed(2));
// 8.将减号和份数元素显示
if(num == 0){

$(this).prev().hide();
$(this).hide();
return;
}
});