<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>購物車的基本實現</title> </head> <body> <h2>購物車的基本實現</h2> 全部商品<font color="red"><b>{$count}</b></font> <table border="1" cellpadding="0" cellspacing="0"> <tr> <th><input type="checkbox" name="check" value="">全選</th> <th>商品圖片</th> <th>商品名稱</th> <th>商品屬性</th> <th>單價</th> <th>數量</th> <th>小計</th> <th>操作</th> </tr> {volist name="data" id="v"} <tr> <td><input type="checkbox" name="check" class="check" value="{$v.sid}"></td> <td><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547012448308&di=356338333063fa0fb4d902fc7ea994c5&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D1887458228%2C1232896188%26fm%3D214%26gp%3D0.jpg" alt="商品圖片" width="100" height="100"></td> <td>{$v.goods_name}</td> <td> <span>顏色：{$v.color_val}</span><br> <span>尺寸：{$v.size_val}</span> </td> <td>￥<span class="unit">{$v.unit_price}</span></td> <td> <input type="button" value="-" class="jian"> <span class="num">{$v.num}</span> <input type="button" value="+" class="jia"> </td> <td class="subtotal">{$v.subtotal}</td> <td> <a href="#">刪除</a> </td> </tr> {/volist} </table> <div style="margin-left: 250px;"> 已選擇<span class="goods_num">0</span>件商品 總價（不含運費）：￥<span class="goods_price"></span> <a href="#">結算</a> </div> <script src="__STATIC__/js/jquery.js"></script> <script> //拿出來一張白紙(定義一個空數組) var arr = []; //定義一個全局數組，用來收集和計算總價 var price = []; //點擊加號實現的效果 $(document).on('click','.jia',function () { //獲取數量 var num = $(this).prev().text(); //自增1 var last_num = parseInt(num)+1; //替換 $(this).prev().text(last_num); //獲取單價 var unit_price = $(this).parents("tr").find(".unit").text(); //計算出小計的總價 var sum_price = unit_price*last_num; //替換小計這一部分的節點td $(this).parents("tr").find(".subtotal").text(sum_price); }); //點擊減號實現的效果 $(document).on('click','.jian',function () { //獲取數量 var num = $(this).next().text(); //自增1 var last_num = parseInt(num)-1 <= 1 ? 1 : parseInt(num)-1; //替換 $(this).next().text(last_num); //獲取單價 var unit_price = $(this).parents("tr").find(".unit").text(); //計算出小計的總價 var sum_price = unit_price*last_num; //替換小計這一部分的節點td $(this).parents("tr").find(".subtotal").text(sum_price); }) //點擊多選框實現數量的統計 $(document).on('click','.check',function () { var obj = $(this); // console.log(obj[0].checked); // return; //獲取多選框的值(拿到名字) var check_val = $(this).val(); //給數組追加元素（給紙上寫名字） if(obj[0].checked){ arr.push(check_val); //計算價格 var xiaoji = $(this).parents("tr").find(".subtotal").text(); price.push(xiaoji); }else{ arr.splice($.inArray(check_val,arr),1); price.splice($.inArray(xiaoji,price),1) } //計算數組的長度，然后替換 $(".goods_num").text(arr.length) //計算價格 var str = 0; $.each(price,function (k,v) { str += parseInt(v); }) $(".goods_price").text(str); }) </script> </body> </html>