购物车动态修改购买条数和总计(上一篇代码的补充)

1.cart.js页面 购物车页面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>cart</title>
        <!--引入bootstrap.css-->
        <link rel="stylesheet" type="text/css" href="../../bootstrap/css/bootstrap.css"/>
        <!--引入myscss.css-->
        <link rel="stylesheet" type="text/css" href="../../css/myscss.css" />
        <!--引入jquery.js-->
        <script type="text/javascript" src="../../bootstrap/js/jquery-3.1.1.js"></script>
        <!--bootstrap.js-->
        <script type="text/javascript" src="../../bootstrap/js/bootstrap.js"></script>
        <!--head.js-->
        <script type="text/javascript" src="../common/head.js"></script>
        <!--cart.js-->
        <script type="text/javascript" src="cart.js"></script>
    </head>
    <body>
        <!--公用头部-->
        <div id="navhead"></div>
        <!--主体部分-->
        <div class="container">
            <div class="row">
                <div class="col-md-1"></div>
                <div class="col-md-10">
                    <!--content头部图片-->
                    <img src="../../img/otherimages/buy1.gif" />
                    <!--content中的table-->
                    <div class="panel panel-info margintop">
                        <div class="panel-heading text-center"><h4><strong>购物车列表</strong></h4></div>
                        <div id="cartable">
                            <!--<table class="table text-center">
                                <tr class="danger">
                                    <th class="text-center">序号</th>
                                    <th class="text-center">商品名称</th>
                                    <th class="text-center">价格</th>
                                    <th class="text-center">购买数量</th>
                                    <th class="text-center">库存</th>
                                    <th class="text-center">小计</th>
                                </tr>
                                <tr>
                                    <td>0</td>
                                    <td>Java模式</td>
                                    <td>21.5</td>
                                    <td><a class='glyphicon glyphicon-minus-sign' onclick='subBuyNum(this)'></a>1<a class='glyphicon glyphicon-plus-sign' onclick='addBuyNum(this)'></a></td>
                                    <td>100</td>
                                    <td>21.5</td>
                                </tr>
                                <tr>
                                    <td>1</td>
                                    <td>JavaScript</td>
                                    <td>18.5</td>
                                    <td>1</td>
                                    <td>100</td>
                                    <td>18.5</td>
                                </tr>
                            </table>-->
                        </div>
                        <div class="panel-footer clearfix"><span class="pull-right">总计</span></div>
                    </div>
                </div>
                <div class="col-md-1"></div>
            </div>
        </div>
    </body>
</html>

2.cart.js代码 实现动态修改购买条数和总计

//购物车动态添加购物车信息
$(function(){
    //1.从localStorage获取购物信息
    var books = localStorage.getItem("carts");
    var bookArr = JSON.parse(books);//将获取到的字符串存放进数组中
    //2.声明一个html用来拼接页面
    var html = "";
    html += "<table id='cart' class='table text-center'>";
    html +=     "<tr class='danger'>";
    html +=         "<th class='text-center'>序号</th>";
    html +=         "<th class='text-center'>商品名称</th>";
    html +=         "<th class='text-center'>价格</th>";
    html +=         "<th class='text-center'>购买数量</th>";
    html +=         "<th class='text-center'>库存</th>";
    html +=         "<th class='text-center'>小计</th>";
    html +=     "</tr>";
    //3.遍历数组
    for(var i = 0;i < bookArr.length;i++){
        //获取一本书
        var abook = bookArr[i];
        //将书本的信息填到表格中
        html +=     "<tr>";
        html +=         "<td>"+i+"</td>";
        html +=         "<td>"+abook.name+"</td>";
        html +=         "<td>"+abook.price+"</td>";
        html +=         "<td><a class='glyphicon glyphicon-minus-sign' onclick='subBuyNum(this)'></a>"+abook.buynum+"<a class='glyphicon glyphicon-plus-sign' onclick='addBuyNum(this)'></a></td>";
        html +=         "<td>"+abook.num+"</td>";
        html +=         "<td>"+abook.price*abook.buynum+"</td>";
        html +=     "</tr>";
    }
    html += "</table>";
    $("#cartable").html(html);
});
//点击减号按钮
function subBuyNum(caller){
    calFunction(caller,"sub");
}
//点击加号按钮
function addBuyNum(caller){
    calFunction(caller,"add");
}
//优化代码
function calFunction(caller,tag){
    //得到当前调用者的父节点
    var $parent = $(caller).parent();
    //找到父节点的文本信息
    var buyNum = parseInt($parent.text());
    //判断当前是+还是-
    if(tag == "sub"){
        //减号
        if(buyNum>=2){
            buyNum--;
        }
    }
    //加号
    else{
        buyNum++;
    }
    //4.拼接html信息,把html放到parent中
    var html = "";
    html += "<a class='glyphicon glyphicon-minus-sign' onclick='subBuyNum(this)'></a>"+buyNum+"<a class='glyphicon glyphicon-plus-sign' onclick='addBuyNum(this)'></a>";
    $parent.html(html);

    //5.找到价格元素的信息
    var $price = $parent.prev();
    var price = parseFloat($price.text());

    //6.修改小计元素的信息
    var $lastB = $parent.next().next();
    $lastB.text(price*buyNum);

    //7.修改总计元素的信息
    calTotal();

    //8.修改本地购物车的数量
    //8.1找到序号数列
    var $first = $parent.parent().children(":first-child");
    var n = parseInt($first.text());
    modiyBuyNum(n,buyNum);
}

//计算当前购物车的总价格
function calTotal(){
    var $totalPrice = $("#totalprice"); 
    //找到table里面的tbody,其实table的所有正文信息都放在tbody里面
    var $table = $("#cart").children();
    var $children = $table.children(":not(:first)");
    var $rowprices = $children.children(":last-child");
    var totalp = 0;
    $rowprices.each(function(){
        var p = parseFloat($(this).text());
        totalp += p;
    })
    $totalPrice.text("总计:"+totalp);
}

//页面一载入就计算总计购物车的总价信息
$(function(){
    calTotal();
})


//修改本地购物车的数量
function modiyBuyNum(idx,buynum){
    //1.获取本地购车的数据(字符串)
    var books = localStorage.getItem("carts");
    //2.把字符串转换为数组对象
    var bookArr = JSON.parse(books);
    //3.从数组中获取指定idx的数据
    var abook = bookArr[idx];
    //4.修改这条数据
    abook.buynum = buynum;
    //5.重新保存购物车
    var booksStr = JSON.stringify(bookArr);
    localStorage.setItem("carts",booksStr);
}

3.效果图片