<!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>购物车前端页面jquery效果的实现
原文地址：https://www.cnblogs.com/hopelooking/p/10243925.html