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

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

HTML：

什锦小郡肝套餐

￥

16

0

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;

}

});