案例记录，列表商品数量增减和价格实时统计

最近一个项目中实现的一个功能，一个购物车列表所有商场的增加减少，并且实时的计算商品总金额和结算总金额，里面用到了很多以前没怎么熟练的jquery方法，所以决定记录一下。不过问题还是有的，比如用户并不能通过键盘输入定义商品，只能通过加减按钮，因为我使用的是span标签并且用text()方法控制内部的值，想了想还是以后再说吧。

js主要代码如下（需要引入jquery）：

   $(function(){
        $("#p").click(function() {
            var p =  $("#p").text();
            if(p == "全选"){
                $("input:checkbox[name=pru]").prop('checked',true);
                $("#p").text("反选");
            }else{
                $("input:checkbox[name=pru]").removeAttr("checked");
                $("#p").text("全选");
            }
        });
        $(".jia").click(function() {
            var proPrice = parseInt($(this).closest('.pro-box').find(".pro-price").text());
            var proNum = parseInt($(this).prev().text());
            proNum = proNum + 1;
            var proSum = proNum*proPrice;
            $(this).closest('.pro-box').find(".list-price").text(proSum);
            $(this).prev().text(proNum);
            sum();
        });
        $(".jian").click(function() {
            var proPrice = parseInt($(this).closest('.pro-box').find(".pro-price").text());
            var proNum = parseInt($(this).next().text());
            proNum = proNum - 1;
            if(proNum < 0){
                proNum = 0;
            }
            var proSum = proNum*proPrice;
            $(this).closest('.pro-box').find(".list-price").text(proSum);
            $(this).next().text(proNum);
            sum();
        });
    });
    function sum(){
        var sum = 0;
        $(".list-price").each(function(){
            sum += $(this).text() * 1;
        });
        $("#sum").text(sum);    
    }
    sum();

总计四个方法，第一个用来控制反选全选，然后就是数值的加减筛选计算结果，最后是数值的统计。

html代码如下：

<div class="panel-content" id="ShoppingCart">
    <div class="cart-btn">
        <p>购物车列表总金额：<span class="text-important">￥</span><span class="text-important" id="sum">0</span></p>
        <button type="button" id="p" class="btn default">全选</button>
        <button type="button" class="btn success">购买选中</button>
        <button type="button" class="btn important">删除选中</button>
    </div>
    <table class="table table-hover">
        <thead>
            <tr>
                <td>选择</td>
                <td>订单编号</td>
                <td>商品名称</td>
                <td>数量</td>
                <td>需支付金额</td>
                <td>加入时间</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>
            <tr class="pro-box">
                <td><input type="checkbox" name="pru" value="HK4245646" /><span class="pro-price hidden">120</span></td>
                <td><a href="javascript:;">HK4245646</a></td>
                <td>商品的名称，可能很长很长，需要截取</td>
                <td><a href="javascript:;" class="ico jian">&#xe6fe;</a><span class="pro-num text-default">8</span><a href="javascript:;" class="ico jia">&#xe6b9;</a></td>
                <td><p class="text-important">￥<span class="list-price">960</span></p></td>
                <td>2019/03/20 15:14</td>
                <td><a href="#" class="text-success">购买</a>&nbsp;<a href="#" class="text-important">删除</a></td>
            </tr>
            <tr class="pro-box">
                <td><input type="checkbox" name="pru" value="HK4245646" /><span class="pro-price hidden">100</span></td>
                <td><a href="javascript:;">HK4245646</a></td>
                <td>商品的名称，可能很长很长，需要截取</td>
                <td><a href="javascript:;" class="ico jian">&#xe6fe;</a><span class="pro-num text-default">1</span><a href="javascript:;" class="ico jia">&#xe6b9;</a></td>
                <td><p class="text-important">￥<span class="list-price">100</span></p></td>
                <td>2019/03/20 15:14</td>
                <td><a href="#" class="text-success">购买</a>&nbsp;<a href="#" class="text-important">删除</a></td>
            </tr>
        </tbody>
    </table>
</div>

里面很多类名来自我自己整理的框架，和增加了一些css的定义。html里面的效果主要是方便js对于数值的读取和赋值，比如初始的价格，数量等。
最终实现效果：