jQuery实现PC端商城购物车模块基本功能
先上效果图：
因为主要是想练习jQuery的使用，所以页面CSS部分比较简陋，有需要的话，大家在参考代码时，可以自己再完善下CSS部分的代码，让购物车页面更加美观。
功能清单如下：
1.全选非全选商品
2.一键删除选中商品
3.一键清空购物车
4.根据添加和删除动态计算已选中的商品总数和总价格，并渲染到页面中
5.点击加减单个商品的数量，键盘输入改变单个商品的数量
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>购物车商品数量增减</title><style type="text/css">a {text-decoration: none;}.itxt {width: 50px;text-align: center;}.clearfix {content: "";visibility: none;display: block;clear: both;}.goods {box-sizing: border-box;/* width: 700px; */height: 100px;border: 1px solid black;padding: 25px;}.g_name {width: 10%;float: left;}.left,.right,.number {float: left;}.left {width: 20%;white-space: nowrap;}.number {width: 30%;text-align: center;}.right {width: 30%;white-space: nowrap;text-align: left;}.delete {text-align: right;display: inline-block;width: 70px;}.goods_check {float: left;height: 20px;}.check_cart_item {background-color: #fff4e8;}</style><script src="js/jquery-3.5.0.js"></script><script type="text/javascript">$(function() {console.log($('.price'));$('.decrease').click(function() {// 1.点击减号，input框中的数值也要进行递减，但要保证input框中的数值 >= 0var curVal = $(this).siblings('.itxt').val();if (curVal >= 2) {curVal -= 1;$(this).siblings('.itxt').val(curVal);}// 2.获取当前商品的单价，和数量，相乘得到商品小计的数值（需要截取字符串，去掉单价里的$符号，并且最终计算得到的商品小计需要保留两位小数，并把计算结果更新到页面的小计中），var price = $(this).parent().siblings('.left').children('.price').html();price = price.substr(1); // 单价var sum = "￥" + (curVal * price).toFixed(2); // 小计$(this).parent().siblings('.right').children('.sum').html(sum);getSum();})$('.increase').click(function() {// 只能获取当前点击元素的兄弟元素的文本框的值var curVal = $(this).siblings('.itxt').val();curVal = parseInt(curVal);curVal += 1;// 只能改变当前点击元素的兄弟元素的文本框的值，不能改变其他商品的文本框的值$(this).siblings('.itxt').val(curVal);var price = $(this).parent().siblings('.left').children('.price').html();price = price.substr(1); // 单价从第一位截取，来去掉$符号var sum = (curVal * price).toFixed(2); // 小计保留两位小数sum = "￥" + sum;$(this).parent().siblings('.right').children('.sum').html(sum);getSum();})// 3.用户修改文本框的数值,商品小计数值也要更新$('.itxt').change(function() {var price = $(this).parent().siblings('.left').children('.price').html();price = price.substr(1); // 单价从第一位截取，来去掉$符号var sum = $(this).val() * price;sum = "￥" + sum.toFixed(2);$(this).parent().siblings('.right').children('.sum').html(sum);getSum();})renew(); // 页面加载完成后调用renew()函数，把每个商品的单价的数值赋值给这个商品的小计// renew()函数必须在getSum()函数之前，不然商品总价会是0.00getSum(); //没有在input中修改值或者没有点击加减数量时，也要调用这个函数来将商品总数量和商品总价进行更新 // 4. 计算总计总额模块function getSum() {var count = 0; //总件数var money = 0; //总金额$('.itxt').each(function(i, ele) {count += parseInt($(ele).val());})$('.sumNum em').html(count);$('.sum').each(function(i, ele) {money += parseFloat($(ele).html().substr(1));// console.log(money.toFixed(2))// console.log($(ele).html())})// console.log(money.toFixed(2))$('.sumPrice em').html(money.toFixed(2));}// 页面加载完成后调用renew()函数，把每个商品的单价的数值赋值给这个商品的小计function renew() {var array_price = [];// console.log($('.goods').length);for (var i = 0; i < $('.goods').length; i++) {console.log(parseFloat($('.price')[i].innerHTML.substr(1)).toFixed(2));// array_price.push($('.price')[i].innerHTML); array_price.push(parseFloat($('.price')[i].innerHTML.substr(1)).toFixed(2));}console.log(array_price);$('.sum').each(function(i, ele) {$(ele).html('￥' + array_price[i]);})}// 5.删除商品模块// 1)每个商品后面的删除功能$('.delete').click(function() {$(this).parents('.goods').remove();getSum();})// 2)点击删除选中的商品功能$('.removes').click(function() {$('.goods_check:checked').parents('.goods').remove();getSum();})// 3)点击清空购物车$('.remove_cart').click(function() {$('.goods').remove();getSum();})// 全选 非全选按钮$('.checkAll').change(function() {$('.goods_check,.checkAll').prop("checked", $(this).prop("checked")) // 将全选按钮1的 checked的值赋给goods按钮和另一个全选按钮2// console.log()if($('.goods_check,.checkAll').prop("checked")) {$('.goods').addClass('check_cart_item');}else {$('.goods').removeClass('check_cart_item');}})$('.goods_check').change(function() {if($(this).prop('checked')){$(this).parents('.goods').addClass('check_cart_item');}else {$(this).parents('.goods').removeClass('check_cart_item');}// :checked选择器可以帮我们自动获取已勾选的按钮,通过length属性可以获取已勾选按钮的数量 将其 与按钮的总数进行对比 来判断是否所有商品按钮都已经被勾选if ($(".goods_check:checked").length === $('.goods_check').length) {$('.checkAll').prop("checked", true)} else {$('.checkAll').prop("checked", false)}})})</script></head><body>全选<input type="checkbox" name="" id="" value="全选1" class="checkAll" /><div class="goods clearfix"><input type="checkbox" name="" id="" value="商品1" class="goods_check" /><span class="g_name">商品1</span><div class="left"><span>单价:</span><span class="price">￥12.6</span></div><div class="number"><a href="#" class="decrease">-</a><input type="text" value="1" class="itxt" /><a href="#" class="increase">+</a></div><div class="right"><span>小计:</span><span class="sum">￥0.00</span><span class="delete"><a href="#">删除</a></span></div></div><div class="goods clearfix"><input type="checkbox" name="" id="" value="商品1" class="goods_check" /><span class="g_name">商品2</span><div class="left"><span>单价:</span><span class="price">￥102.9</span></div><div class="number"><a href="#" class="decrease">-</a><input type="text" value="1" class="itxt" /><a href="#" class="increase">+</a></div><div class="right"><span>小计:</span><span class="sum">￥0.00</span><span class="delete"><a href="#">删除</a></span></div></div><div class="goods clearfix"><input type="checkbox" name="" id="" value="商品1" class="goods_check" /><span class="g_name">商品3</span><div class="left"><span>单价:</span><span class="price">￥19.9</span></div><div class="number"><a href="#" class="decrease">-</a><input type="text" value="1" class="itxt" /><a href="#" class="increase">+</a></div><div class="right"><span>小计:</span><span class="sum">￥0.00</span><span class="delete"><a href="#">删除</a></span></div></div><div class="goods clearfix"><input type="checkbox" name="" id="" value="商品1" class="goods_check" /><span class="g_name">商品4</span><div class="left"><span>单价</span><span class="price">￥358.9</span></div><div class="number"><a href="#" class="decrease">-</a><input type="text" value="1" class="itxt" /><a href="#" class="increase">+</a></div><div class="right"><span>小计:</span><span class="sum">￥0.00</span><span class="delete"><a href="#">删除</a></span></div></div><div class="bottom">全选<input type="checkbox" name="" id="" value="全选1" class="checkAll" /><span><a href="#" class="removes">删除选中的商品</a></span><span><a href="#" class="remove_cart">清空购物车</a></span><div class="sumNum">已经选中<em>1</em>件商品</div><div class="sumPrice">总计：<em>0.00</em>元</div></div></body>
</html>
