小电商项目实战 互动版

在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

计算总金额


商品的状态选择和数量的加减功能我们已经实现了,选择我们就开始实现当用户选择相关商品时总金额的计算功能。

实现步骤如下:

    1. 定义公共方法,用于用户不同加、减、全选等操作时皆可调用。
    1. 循环列表内所有被选中的checkbox(假设name为chkItem)。
    1. 使用checkbox的相应属性值,来获取价格和数量。
    1. 定义全局变量(假设为sum)存储总金额并赋值显示。

具体方法实现可参考如下内容:

   sum = 0;
   $('input[name="chkItem"]:checked').each(function(){
       var self = $(this),
        price = self.attr('data-price'),
        index = self.attr('data-index');
        var quantity = $('#Q'+index).val();
        sum +=(parseFloat(price)*parseFloat(quantity));
    });
    $("金额标签").html('¥'+ sum +'.00');

到这里,选中商品的价格总计功能也就简单实现了。