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

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端商城购物车模块基本功能（每个商品的小计和合计都会根据添加和删除的操作来动态计算）相关推荐

Vue-elementUI实现PC端商城购物车计算
Vue-elementUI实现PC端商城购物车计算 Vue-elementUI实现PC端商城购物车计算,最重要的就是[computed]里面的计算,用来算出勾选的商品的总价文章目录 Vue-elem ...
Vue3实现pc端商城购物车Demo
主要包含全选,店铺全选,反选,商品数量,价格计算最终效果如下数量加减使用的elementplus 中el-input-number组件 <template><div>< ...
jQuery+css+html淘宝购物车模块
注意给checkbox添加事件就是用change() 给button添加事件就是用click() 1.每次点击+号,根据文本框的值乘以当前商品的价格就是商品的小计 2.只能增加本商品的小计,就是当前商 ...
Mvp快速搭建商城购物车模块
代码地址如下: http://www.demodashi.com/demo/12834.html 前言: 说到MVP的时候其实大家都不陌生,但是涉及到实际项目中使用,还是有些无从下手.因此这里小编带着 ...
web day25 web day24 小项目练习图书商城, 购物车模块,订单模块,支付(易宝支付)
购物车模块购物车存储: 保存在session中(本次使用的) 保存在cookie中保存在数据库中购物车相关类购物车结构 CartItem:包含图书和数量,小计 Cart:包含一个Map< ...
SpringBoot--网上商城项目（自定义的参数解析器、购物车后台前台功能、商品详情页）
目录一.自定义的参数解析器关于Mybatis-plus时间字段代码生成问题报错信息:Caused by: java.lang.IllegalStateException: No typehand ...
微信PC端各个数据库文件结构与功能简述 - Multi文件夹
异想之旅:本人原创博客完全手敲,绝对非搬运,全网不可能有重复:本人无团队,仅为技术爱好者进行分享,所有内容不牵扯广告.本人所有文章仅在CSDN.掘金和个人博客(一定是异想之旅域名)发布,除此之外全部是 ...
微信PC端各个数据库文件结构与功能简述 - 根目录
异想之旅:本人原创博客完全手敲,绝对非搬运,全网不可能有重复:本人无团队,仅为技术爱好者进行分享,所有内容不牵扯广告.本人所有文章仅在CSDN.掘金和个人博客(一定是异想之旅域名)发布,除此之外全部是 ...
JavaScript+jQuery（PC端+移动端）
文章目录一.JavaScript 1)JS组成 2)JS引入方式 3)JS注释 4)JS输入输出语句 5)JS变量 6)数据类型 7)数据类型转换 8)标识符.关键字.保留字 9)运算符使用注意事项 ...

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

jQuery实现PC端商城购物车模块基本功能

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

最新文章

热门文章