购物车JS

购物车JS的操作(jquery)

先说思路:
先写计算方法,然后在’勾选’,'数量增加’时调用计算方法

展示代码

• html代码

   	

	

	
{{ 商品名称 }}
{{ 商品价钱}}元/{{商品的单位 }}
	
{{ 商品的单位 }}
	
{{ 商品的价钱 }}元
	

		

			+
			
			-
		
	
	
25.80元

• 全选
• 合计(不含运费)：¥42.60
  共计2件商品
• 去结算

• js 代码

分析代码:

点击加号,点击减号

• html代码

+

-

• js代码
  加:通过class="add fl"来获取点击事件,然后使input标签的value值+1
  减:相比较加,减需要判断一下,如果不为0,则可以进行减法运算

$('.add').click(function () {
        $(this).next().val(parseInt($(this).next().val())+1);
        total_price();
    });
$('.minus').click(function () {
        var num= parseInt($(this).prev().val());
        if (num>0){
            $(this).prev().val(parseInt($(this).prev().val())-1);
        }
        total_price();
    });

勾选商品,全选商品
html代码,给勾选绑定点击事件οnclick="".触发对应的js的函数

{#勾选商品#}
function  click_check() {
        total_price();
}
{# 全选商品 #}
function checked_all() {
        if ($('#checked_all').prop('checked')){
            $('[name="checked"]').prop('checked', true);
        } else {
            $('[name="checked"]').prop('checked', false);
        }
        total_price();
}

计算价钱函数
价钱有小计和总价钱,如第一张图

小计的html代码

25.80元

总价钱的html代码

合计(不含运费)：¥42.60
共计2件商品

js代码

function total_price() {
        var he_ji = 0;                                        商品数量
        var count_all = 0;                                    商品价钱
        $('[name="checked"]').each(function () {              判断是否勾选
            if ($(this).prop('checked')) {                    如果勾选了则继续执行
获取商品单价      var price= $(this).parent().parent().children('.col05').children('span').html();   
获取商品数目      var num = $(this).parent().parent().children('.col06').children('div').children('input').val();
计算小计          var xiao_ji=parseFloat(price)*parseInt(num);
修改小计文本      $(this).parent().parent().children('.col07').html(xiao_ji.toFixed(2)+'元');
商品数目          he_ji = xiao_ji+ he_ji;
购物车总价钱      count_all = count_all + parseInt(num);
          }
        });
        $('#he_ji').html(he_ji);                              修改合计的商品的数目
        $('#count_all').html(count_all)           			修改购物车当前的总价钱
    }

然后本页面就算是写完了
(感谢司金辉大佬)