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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/471385.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

七、CSS 三大特性（完整详细解析）

七、CSS 三大特性（完整详细解析）

** CSS 三大特性&#xff08;完整详细解析&#xff09; ** 1.优先级&#xff1a; 定义CSS样式时&#xff0c;经常出现两个或更多规则应用在同一元素上&#xff0c;此时&#xff0c; 选择器相同&#xff0c;则执行层叠性选择器不同&#xff0c;就会出现优先级的问题。 1&am…
阅读更多...
LeetCode 2114. 句子中的最多单词数

LeetCode 2114. 句子中的最多单词数

文章目录1. 题目2. 解题1. 题目 一个 句子 由一些 单词 以及它们之间的单个空格组成&#xff0c;句子的开头和结尾不会有多余空格。 给你一个字符串数组 sentences &#xff0c;其中 sentences[i] 表示单个 句子 。 请你返回单个句子里 单词的最多数目 。 示例 1&#xff1…
阅读更多...
一、css清除浮动方法学习笔记总结（超详细，简单易懂）

一、css清除浮动方法学习笔记总结（超详细，简单易懂）

** css清除浮动方法学习笔记总结&#xff08;超详细&#xff0c;简单易懂&#xff09; ** 问题&#xff1a; 上图中&#xff0c;由于container(父级元素&#xff09;未设置高度&#xff0c;其内部子元素设置了float浮动&#xff0c;导致与container同级&#xff08;也就是co…
阅读更多...
LeetCode 2115. 从给定原材料中找到所有可以做出的菜（拓扑排序）

LeetCode 2115. 从给定原材料中找到所有可以做出的菜（拓扑排序）

文章目录1. 题目2. 解题1. 题目 你有 n 道不同菜的信息。给你一个字符串数组 recipes 和一个二维字符串数组 ingredients 。 第 i 道菜的名字为 recipes[i] &#xff0c;如果你有它 所有 的原材料 ingredients[i] &#xff0c;那么你可以 做出 这道菜。一道菜的原材料可能是 另…
阅读更多...
C语言makefile文件详解,makefile讲解

C语言makefile文件详解,makefile讲解

仅供自己学习使用一、Makefile介绍Makefile 或 makefile: 告诉make维护一个大型程序&#xff0c; 该做什么。Makefile说明了组成程序的各模块间的相互 关系及更新模块时必须进行的动作&#xff0c; make按照这些说明自动地维护这些模块。执行make命令时&#xff0c;需要一个 Ma…
阅读更多...
二、MySQL连接查询学习笔记（多表连接查询：内连接，外连接，交叉连接详解）

二、MySQL连接查询学习笔记（多表连接查询：内连接，外连接，交叉连接详解）

MySQL连接查询&#xff08;多表连接查询&#xff1a;内连接&#xff0c;外连接&#xff0c;交叉连接详解&#xff09; 6&#xff1a;多表连接查询 笛卡尔乘积&#xff1a;如果连接条件省略或无效则会出现 解决办法&#xff1a;添加上连接条件连接查询的分类&#xff1a; 1.按…
阅读更多...
android 本机号码一键登录,什么是本机号码一键登录？APP本机号码一键登录如何实现？...

android 本机号码一键登录,什么是本机号码一键登录？APP本机号码一键登录如何实现？...

三大运营商推出一键登录的服务后&#xff0c;由于其便捷性和安全性都好于传统短信验证码&#xff0c;越来越多的APP注册登录环节都在使用本机号码一键登录验证方式。本文主要介绍了本机号码一键登录特点以及实现方法。一、什么是本机号码一键登录&#xff1f;平时我们填手机号接…
阅读更多...
LeetCode 2116. 判断一个括号字符串是否有效（栈）

LeetCode 2116. 判断一个括号字符串是否有效（栈）

文章目录1. 题目2. 解题1. 题目 一个括号字符串是只由 ( 和 ) 组成的 非空 字符串。 如果一个字符串满足下面 任意 一个条件&#xff0c;那么它就是有效的&#xff1a; 字符串为 ().它可以表示为 AB&#xff08;A 与 B 连接&#xff09;&#xff0c;其中A 和 B 都是有效括号字…
阅读更多...
NavigationController

NavigationController

前面的一篇文章《iOS开发16&#xff1a;使用Navigation Controller切换视图》中的小例子在运行时&#xff0c;屏幕上方出现的工具栏就是Navigation Bar&#xff0c;而所谓UINavigationItem就可以理解为Navigation Bar中的内容&#xff0c;通过编辑UINavigationItem&#xff0c;…
阅读更多...
android studio windows,AndroidStudio的使用（Windows）

android studio windows,AndroidStudio的使用（Windows）

演示模式View---Enter presentation mode演示代码快捷提示commondshfita最近修改的文件ctrlshfite代码书签在一行代码处使用F11也可以在navigate--bootmarkPaste_Image.png回退到上一个浏览的地方ctrlaltleft/right快速进入方法内ctrlb查看方法的参数定义commondpPaste_Image.p…
阅读更多...
LeetCode 2119. 反转两次的数字

LeetCode 2119. 反转两次的数字

文章目录1. 题目2. 解题1. 题目 反转 一个整数意味着倒置它的所有位。 例如&#xff0c;反转 2021 得到 1202 。反转 12300 得到 321 &#xff0c;不保留前导零 。 给你一个整数 num &#xff0c;反转 num 得到 reversed1 &#xff0c;接着反转 reversed1 得到 reversed2 。 …
阅读更多...
三、MySQL子查询学习笔记（标量子查询、列子查询、行子查询、表子查询 详解）

三、MySQL子查询学习笔记（标量子查询、列子查询、行子查询、表子查询 详解）

三、MySQL子查询学习笔记 7&#xff1a;子查询 含义&#xff1a; 一条查询语句中又嵌套了另一条完整的select语句&#xff0c;其中被嵌套的select语句&#xff0c;称为子查询或内查询&#xff1b;在外面的查询语句&#xff0c;称为主查询或外查询 分类&#xff1a; 一、按子查…
阅读更多...
LeetCode 2120. 执行所有后缀指令（模拟）

LeetCode 2120. 执行所有后缀指令（模拟）

文章目录1. 题目2. 解题1. 题目 现有一个 n x n 大小的网格&#xff0c;左上角单元格坐标 (0, 0) &#xff0c;右下角单元格坐标 (n - 1, n - 1) 。 给你整数 n 和一个整数数组 startPos &#xff0c;其中 startPos [startrow, startcol] 表示机器人最开始在坐标为 (startrow…
阅读更多...
android代理生命周期,了解 Activity 生命周期

android代理生命周期,了解 Activity 生命周期

当用户浏览、退出和返回到您的应用时&#xff0c;您应用中的在生命周期回调方法中&#xff0c;您可以声明用户离开和再次进入 Activity 时 Activity 的行为方式。例如&#xff0c;如果您正构建流媒体视频播放器&#xff0c;当用户切换至另一应用时&#xff0c;您可能要暂停视频…
阅读更多...
LeetCode 2121. 相同元素的间隔之和（前缀和）

LeetCode 2121. 相同元素的间隔之和（前缀和）

文章目录1. 题目2. 解题1. 题目 给你一个下标从 0 开始、由 n 个整数组成的数组 arr 。 arr 中两个元素的 间隔 定义为它们下标之间的 绝对差 。更正式地&#xff0c;arr[i] 和 arr[j] 之间的间隔是 |i - j| 。 返回一个长度为 n 的数组 intervals &#xff0c;其中 interva…
阅读更多...
在android添加数据采集,一种基于Android系统的地理信息数据采集方法与流程

在android添加数据采集,一种基于Android系统的地理信息数据采集方法与流程

本方法属于采集地理信息数据的发明&#xff0c;是一种基于android操作系统和gis地理信息系统进行户外地理信息数据采集的方法。背景技术&#xff1a;众所周知地理信息数据采集在很多行业中都有应用&#xff0c;比如说农业中的土地普查、城市管理中的地下管线普查、工业中的地质…
阅读更多...
LeetCode 2124. 检查是否所有 A 都在 B 之前

LeetCode 2124. 检查是否所有 A 都在 B 之前

文章目录1. 题目2. 解题1. 题目 给你一个 仅 由字符 a 和 b 组成的字符串 s 。 如果字符串中 每个 ‘a’ 都出现在 每个 ‘b’ 之前&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 示例 1&#xff1a; 输入&#xff1a;s "aaabbb" 输出&#x…
阅读更多...
设计模式—桥接模式

设计模式—桥接模式

前言 这里以电视遥控器为例子引出桥接模式&#xff0c;首先每个牌子的电视都有一个遥控器&#xff0c;可以设计吧遥控器作为一个抽象类&#xff0c;抽象类中提供遥控器的所有实现&#xff0c;其他具体电视品牌的遥控器都继承这个抽象类 这样的实现使得每个不同型号的电视都有自…
阅读更多...
LeetCode 2125. 银行中的激光束数量

LeetCode 2125. 银行中的激光束数量

文章目录1. 题目2. 解题1. 题目 银行内部的防盗安全装置已经激活。 给你一个下标从 0 开始的二进制字符串数组 bank &#xff0c;表示银行的平面图&#xff0c;这是一个大小为 m x n 的二维矩阵。 bank[i] 表示第 i 行的设备分布&#xff0c;由若干 ‘0’ 和若干 ‘1’ 组成。…
阅读更多...
LeetCode 2126. 摧毁小行星（贪心）

LeetCode 2126. 摧毁小行星（贪心）

文章目录1. 题目2. 解题1. 题目 给你一个整数 mass &#xff0c;它表示一颗行星的初始质量。 再给你一个整数数组 asteroids &#xff0c;其中 asteroids[i] 是第 i 颗小行星的质量。 你可以按 任意顺序 重新安排小行星的顺序&#xff0c;然后让行星跟它们发生碰撞。如果行星…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023