jquery清空购物车小案例
2024-06-11 20:04:57
实现效果
可实现功能
- 数量增加、减少
- 小计结算
- 总商品数量、总价格计算
- 移除购物车
- 清空购物车
代码
HTML结构：
<div class="box"><div class="title"><!-- 单价 --><div class="bar price">单价</div><!-- 数量 --><div class="bar num">数量</div><!-- 小计 --><div class="bar totle">小计</div><!-- 操作 --><div class="bar done">操作</div></div><div class="content"><div class="item"><!-- 图片展示 --><div class="imgShow left"><img src="imgs/hr.jpg" alt=""></div><!-- 文字内容 --><div class="text left"><p>荣耀20i 3200万AI自拍 超广角三摄 全</p><p>荣耀20i 3200万AI自拍 超广角三摄 全</p></div><!-- 单价 --><div class="s-price left">¥ <strong>1000.00</strong></div><!-- 数量 --><div class="num1 left"><a href="javascript:;" class="sub">-</a><input type="text" value="1"><a href="javascript:;" class="add">+</a></div><!-- 总结 --><div class="t_price left">¥<strong>1000.00</strong></div><!-- 删除 --><div class="del left"><a href="javascript:;">移除购物车</a></div></div><div class="item"><!-- 图片展示 --><div class="imgShow left"><img src="imgs/hr.jpg" alt=""></div><!-- 文字内容 --><div class="text left"><p>荣耀20i 3200万AI自拍 超广角三摄 全</p><p>荣耀20i 3200万AI自拍 超广角三摄 全</p></div><!-- 单价 --><div class="s-price left">¥<strong>1000.00</strong></div><!-- 数量 --><div class="num1 left"><a href="javascript:;" class="sub">-</a><input type="text" value="1"><a href="javascript:;" class="add">+</a></div><!-- 总结 --><div class="t_price left">¥<strong>1000.00</strong></div><!-- 删除 --><div class="del left"><a href="javascript:;">移除购物车</a></div></div><div class="item"><!-- 图片展示 --><div class="imgShow left"><img src="imgs/hr.jpg" alt=""></div><!-- 文字内容 --><div class="text left"><p>荣耀20i 3200万AI自拍 超广角三摄 全</p><p>荣耀20i 3200万AI自拍 超广角三摄 全</p></div><!-- 单价 --><div class="s-price left">¥<strong>1000.00</strong></div><!-- 数量 --><div class="num1 left"><a href="javascript:;" class="sub">-</a><input type="text" value="1"><a href="javascript:;" class="add">+</a></div><!-- 总结 --><div class="t_price left">¥<strong>1000.00</strong></div><!-- 删除 --><div class="del left"><a href="javascript:;">移除购物车</a></div></div></div><div class="bot"><!-- 清空购物车 --><a href="javascript:;" class="clear_p left">清空购物车</a><!-- 商品总数 --><div class="product_num left">已购买<strong>0</strong> 件商品</div><!-- 商品总价 --><div class="product_money left">总价:<strong>00.00</strong></div></div></div>
js结构
<script src="./jquery.min.js"></script>
<script>(function() {let add = $('.add');let sub = $('.sub');//增加数量add.click(function() {let v = $(this).siblings('input').val();v++;//数量$(this).siblings('input').val(v);//单价let price = $(this).parent().siblings('.s-price').find('strong').text();//小计let strong = $(this).parent().siblings('.t_price').find('strong');//小计总价格strong.text((v * price).toFixed(2));getCount();});//减少数量sub.click(function() {let v = $(this).siblings('input').val();//当数量小于0时，需添加判断条件，结束执行if (v == 0) {return;};v--;//数量$(this).siblings('input').val(v);//单价let price = $(this).parent().siblings('.s-price').find('strong').text();let strong = $(this).parent().siblings('.t_price').find('strong');//小计总价格，保留两位小数 strong.text((v * price).toFixed(2));getCount();});//计算总数量和价格function getCount() {//数量表单值let ints = $('.num1 input');let num = 0;//总数量$.each(ints, function(index, item) {num += Number($(item).val());});$('.product_num strong').text(num);//总价格let strongs = $('.t_price strong');let sum = 0;strongs.each(function(index, item) {sum += Number($(item).text());});$('.product_money strong').text(sum.toFixed(2))}getCount();//移除购物车let del = $('.del a');let content = $('.item');del.click(function() {$(this).parents('.item').remove();getCount();});//清空购物车let car = $(".clear_p");car.click(function() {$(".content").empty();getCount();})})()</script>jquery清空购物车小案例相关推荐
- jQuery[详解]+小案例
jQuery的总结 1.初始jQuery 2.jQuery的选择器 3.jQuery的事件和动画 4.使用jQuery操作Dom 小案例 ...
- 【Android笔记41】使用Android实现一个简易版本的购物车小案例
这篇文章,主要是使用Android实现一个简易版本的购物车小案例. 目录 一.购物车案例 1.1.创建主界面 (1)主界面布局样式 (2)商品列表Fragment
- VUE购物车小案例—vue指令的综合应用
需求: 运用Vue基础指令知识实现小小购物车: 涉及到的指令有:v-for.v-model .v-on.v-text 1.能够显示商品名,价格,以及当前商品在购物车的数量 2. 点击 加+ 减- 可 ...
- vue小案例（小黑记事本和购物车）
vue小案例 小黑记事本小案例 <footer class="footer" ><span class="todo-count" v-if=& ...
- JQuery的几个简单小案例（基础）
JQuery的几个简单小案例 实现表格的的隔行换色 实现复选框的全选与全不选 QQ表情的选择 多选下拉列表的左右移动 实现表格的的隔行换色 需求:事先制作一个如图所示的table表格,将数据行的奇数行 ...
- jQuery插件实现图片墙小案例
你想写出绚丽多彩的图片墙吗?想的话就来一起看一下接下来的内容吧 接下来就让我们使用两个简单的插件来实现图片墙小案例吧.编写之前需要提前下载lazyload懒加载插件和masonry瀑布流式布局插件.( ...
- 运用JQuery代码写的计算器小案例
JQuery核心函数: (1). jQuery([selector,[context]]) 用法:这个函数最基本的用法就是向它传递一个表达式(通常由 CSS 选择器查找所有匹配的元素). 这个函数接收 ...
- MVC项目功能之加入购物车，清空购物车
一.本期目标 1.加入购物车 2.购物车查询 3.清空购物车 实现购物的三种方式: 第一种:session 保存购物车信息到session 1.点击我的购物车,查询后台的seesion,通过用户 ...
- EasyUI项目之门户（添加查询购物车与清空购物车）
目标效果: 目标: 1,添加查询购物车 2,清空购物车 一,添加查询购物车 三种实现方法 0.1 session 保存购物车信息到session服务端 0.2 cookie保存购物车到本地(效率更高 ...
最新文章
- Nginx通过端口号区分虚拟机
- java校验码的设计_Java动态验证码单线设计的两种方法
- 为什么买入不了创业版_详解实战抄底——如何抄到下引线的最底端。及妖股的首板买入点...
- Flink 1.9 实战：使用 SQL 读取 Kafka 并写入 MySQL
- etcd 启动分析_Etcd 架构与实现解析
- webserver 交互方式说明
- java t9 字母组合_太赞了！美团T9终于整理出Java架构之完美设计实战开源文档
- hive case when语法_SQL中CASE表达式的妙用
- vue具体页面跳转传参方式
- Java使用笔记之stream和sorted使用
- 系统辨识（五）：系统辨识的最小二乘法基础
- 任意文件读取与下载漏洞
- 网络安全工程师面试总结
- 传说中的800句记7000词
- 华为上机题之Word Maze(单词迷宫)
- 花菁染料CY3标记聚乙二醇修饰的活性基团MAL/SH/NH2-星戈瑞
- 在linux安装pyrit
- 安装oh my zsh
- 共模和差模电感电路分析方法及思路：安规设计，emi，共模电感，差模电感，x电容...
- 算法快学笔记（五）：散列表