js购物车的实现

购物车
在商城类项目中，购物车是非常常见的，但购物车该怎么实现呢？很多讲购物车都是用html页面模拟的静态数据，这种数据没有灵活性，正常的商城思路应该是：根据用户的id查询出用户的购物车中的商品，然后对用户购物车商品进行遍历，本文章就是对遍历出来的商品进行购物车数量的加减和小计、总计之间的计算。

遍历的HTML页面：

    <table>
        <tr>
            <td>商品名称</td>
            <td>图片</td>
            <td>信息</td>
            <td>颜色</td>
            <td>单价</td>
            <td>数量</td>
            <td>操作</td>
        </tr>
        <th:block th:each="s:${ShoopsList}">
        <tr>
            <td>
                <!-- readonly="readonly"文本框的值不可更改 -->
                <input type="text" class="goodsName" name="ck" readonly="readonly" th:value="${s.goodsName}">
            </td>
            <td>
                <img th:src="${s.picture}" width="80px" height="60px"/>
                <input class="picture" type="hidden" th:value="${s.picture}">
            </td>
            <td>
                <input type="text" class="message" id="message" readonly="readonly" th:value="${s.message}">
            </td>
            <td>
                <input type="text" class="color" readonly="readonly" th:value="${s.color}">
            </td>
            <td>
                <input type="text" id="price" class="price" readonly="readonly" th:value="${s.price}">
            </td>
            <td>
                <input type="button" class="sub" value="-">
                <input style="width: 40px" id="num" name="num" class="num" 
                       type="text" readonly="readonly" th:value="${s.num}">
                <input type="button" class="add" value="+">
            </td>
            <td>
                <input type="text" class="total">
            </td>
            <td>
                <input type="hidden" class="tota">
            </td>
        </tr>
        </th:block>
 </table>

运行结果如下图：

js计算数量，小计和总价的操作

//动态绑定事件 +
    $("table").on("click",".add",function(){
        //获取单价
        var price=$(this).parent().prev().children(".price").val();
        //获取数量
        var num=$(this).prev(".num").val();
        //数量自增，重新赋值给数量的文本框
        $(this).prev(".num").val(++num);
        //求小计 这里说一下为什么不直接使用text(num*price);
        /*
        * 二个小数相乘时有时会计算错误，出现174.60000000000002
        * 这种计算跟计算机进制有关
        * 所以需要先把小数点去掉，然后再加上即可*/
        $(this).parent().next().children(".total").val((num*10)*(price*10)/100);
        //调用函数得到小计和总价
        getTotal();
    });
    //动态绑定事件 -
    $("table").on("click",".sub",function(){
        //获取单价
        var price=$(this).parent().prev().children(".price").val();
        //获取数量
        var num=$(this).next(".num").val();
        if(num>1){
            //数量自增，重新赋值给数量的文本框
            $(this).next(".num").val(--num);
        }
        //求小计
        $(this).parent().next().children(".total").val((num*10)*(price*10)/100);
        //调用函数得到小计和总价
        getTotal();
    });
    //计算总价
    var sum=0;
    function getTotal(){
        $(".num").each(function(){
            var num=$(this).val();//数量
            var price=$(this).parent().prev().children(".price").val();//单价
            $(this).parent().next().children(".total").val((num*10)*(price*10)/100);//小计
            //复制一个小计用来消除小数点
            var totals= $(this).parent().next().next().children(".tota").val((num*10)*(price*10));
           sum+=Number(totals.val());//获取小计的值，并转换成数字类型
            $("#amount").text(sum/100);//赋值给总和
        });
        sum=0;//清零
    }
    getTotal();