100字范文 > jQuery实现PC端商城购物车模块基本功能（每个商品的小计和合计都会根据添加和删除的操

jQuery实现PC端商城购物车模块基本功能（每个商品的小计和合计都会根据添加和删除的操

时间：2021-06-16 01:48:45

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>

jQuery实现PC端商城购物车模块基本功能（每个商品的小计和合计都会根据添加和删除的操作来动态计算）

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。