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

来源：互联网发布：软件验收测试报告范文编辑：程序博客网时间：2024/05/20 11:49

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.效果图片

0 0