jq购物车结算功能
css
- *{font-style: normal}
- .gw{margin: 8px;}
- .gw::after{display: block;clear: both;content: '';margin: 10px;}
- .gw_num{border: 1px solid #dbdbdb;width: 110px;line-height: 26px;overflow: hidden;float: left;}
- .gw_num em{display: block;height: 26px;width: 26px;float: left;color: #7A7979;border-right: 1px solid #dbdbdb;text-align: center;cursor: pointer;font-style: normal}
- .gw_num .num{display: block;float: left;text-align: center;width: 52px;font-style: normal;font-size: 14px;line-height: 24px;border: 0;}
- .gw_num em.add{float: right;border-right: 0;border-left: 1px solid #dbdbdb;}
- p{margin: 4px;padding: 0}
- .choose,.qx{float: left;width: 20px;height: 20px;border: 1px solid #ccc; border-radius: 100%;margin-right: 10px;}
- .choose-on, .qx-on{background: url(./on.png) no-repeat center center;background-size: 100%;}
- <div class="zong">
- <div class="gw">
- <div class="choose"></div>
- <div class="gw_num">
- <em class="jian">-</em>
- <input type="text" value="0" class="num"/>
- <em class="add">+</em>
- </div>
- <p>单价<i>20</i>元 总金额:¥<span>0</span></p>
- <div class="del">删除</div>
- </div>
- <div class="gw">
- <div class="choose"></div>
- <div class="gw_num">
- <em class="jian">-</em>
- <input type="text" value="0" class="num"/>
- <em class="add">+</em>
- </div>
- <p>单价<i>40</i>元 总金额:¥<span>0</span></p>
- <div class="del">删除</div>
- </div>
- <div class="gw">
- <div class="choose"></div>
- <div class="gw_num">
- <em class="jian">-</em>
- <input type="text" value="0" class="num"/>
- <em class="add">+</em>
- </div>
- <p>单价<i>40</i>元 总金额:¥<span>0</span></p>
- <div class="del">删除</div>
- </div>
- <div class="gw">
- <div class="choose"></div>
- <div class="gw_num">
- <em class="jian">-</em>
- <input type="text" value="0" class="num"/>
- <em class="add">+</em>
- </div>
- <p>单价<i>40</i>元 总金额:¥<span>0</span></p>
- <div class="del">删除</div>
- </div>
- <div>
- <div class="qx"></div>
- <span>全选</span><span class="gs"></span>
- <p class="a">金额总计:<span>0</span></p>
- </div>
- </div>
js
- $(function(){
- $('.add').click(function(){
- var n = $(this).prev().val()
- var num = parseInt(n) + 1;
- if(n == 5){num = 5} //设置最大数量 5
- $(this).prev().val(num);
- var money = $(this).parents('.gw').find('i').text()
- var sum = money * num
- var p = $(this).parents('.gw').find('span').text(sum)
- // console.log(p)
- // var Sum = $(this).parents('.zong').find('.a > span').text(sum)
- // console.log(Sum)
- jiesuan()
- })
- $('.jian').click(function(){
- var n = $(this).next().val();
- var num = parseInt(n) - 1;
- if(n == 0){num = 0} //设置最小数量 0
- console.log(num)
- $(this).next().val(num);
- var money = $(this).parents('.gw').find('i').text()
- var sum = money * num
- var p = $(this).parents('.gw').find('span').text(sum)
- jiesuan()
- })
- //选中
- $('.choose').click(function(){
- $(this).toggleClass('choose-on')
- // console.log('aa')
- jiesuan()
- xz()
- qx()
- })
- //全选
- $('.qx').click(function(){
- $(this).toggleClass('qx-on')
- if($(this).is('.qx-on')){
- $('.choose').addClass('choose-on')
- }else{
- $('.choose').removeClass('choose-on')
- }
- jiesuan()
- qx()
- })
- //删除
- $('.del').click(function(){
- if(confirm('确定删除商品')){
- $(this).parents('.gw').remove()
- }
- jiesuan()
- qx()
- // console.log(a)
- })
- })
- function jiesuan(){
- var num = 0;
- // alert('aa')
- $('.gw').each(function(){
- if($(this).find('.choose').is('.choose-on')){
- //获取物品单价
- var dj = $(this).find('i').text()
- //获取物品数量
- var sl = $(this).find('.num').val()
- //合计
- var hj = dj * sl
- num += hj;
- }
- })
- $('.a>span').text(num)
- }
- //单选--全选中
- function xz(){
- var choose = $('.choose')
- var choose_on = $('.choose-on')
- if(choose.length == choose_on.length){
- $('.qx').addClass('qx-on')
- }else{
- $('.qx').removeClass('qx-on')
- }
- }
- //全选
- function qx(){
- $('.gs').text(' ')
- var a = $('.choose-on').length;
- $('.gs').text(a)
- if(a > 0){
- $('.gs').prev().text('已选')
- }else{
- $('.gs').prev().text('全选')
- }
- }
jq购物车结算功能的更多相关文章
- 原生JS实现购物车结算功能代码+zepto版
html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
- 微信小程序——购物车结算
项目需要做个购物车结算功能,先分析需求: 1.全选,反选的功能.当选中的个数 = 购物车的数量时,勾选全选按钮,反之则取消选中全选按钮: 2.改变选中状态时,计算总价和总数量: 3.单个产品的数量加减 ...
- 使用jQuery制作一个简易的购物车结算流程
因为今天下午时候在网上买了东西,在结算界面的时候突发奇想的也想自己动手做一个结算界面,当然了,只是一个最简易的结算界面,有商品数量的加减,有单价和小计,单个多个删除,全选和区县全选等等一些小功能,我在 ...
- python3 练习题(用函数完成登录注册以及购物车的功能)
''' 用函数完成登录注册以及购物车的功能 作业需求: 1,启动程序,用户可选择四个选项:登录,注册,购物,退出. 2,用户注册,用户名不能重复,注册成功之后,用户名密码记录到文件中. 3,用户登录, ...
- JS实现购物车动态功能
整理了一下当时学js写的一些案例,觉得购物车功能在一般网站比较常见且基础,现在把它整理出来,需要的小伙伴可以参考一下. 该案例购物车主要功能如下: 1. 商品单选.全选.反选功能 2. 商品添加.删除 ...
- python实现简单的循环购物车小功能
python实现简单的循环购物车小功能 # -*- coding: utf-8 -*- __author__ = 'hujianli' shopping = [ ("iphone6s&quo ...
- jquery-防多店铺购物车结算全选,单选,及删除,价格计算
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 微信小程序 - 实现购物车结算
示例源码下载:小程序-实现购物车结算
- spring boot:用rocketmq消息订阅实现删除购物车商品功能(spring boot 2.3.3)
一,为什么要使用消息队列实现删除购物车商品功能? 消息队列主要用来处理不需要立刻返回结果的业务, 常见的例子: 用户在下单后,要清除原购物车中的商品, 这个处理过程不需要马上实现也不需要返回结果给用户 ...
随机推荐
- Android应用程序无法读写USB设备的解决方法
假设android系统中的API或者apk无法读写usb设备.可能是没有加入读写usb的权限,须要依照例如以下方法进行设置: 1. 在android.hardware.usb.host.xml文件里加 ...
- NATS连线协议具体解释
NATS连线协议具体解释 作者:chszs,未经博主同意不得转载.经许可的转载需注明作者和博客主页:http://blog.csdn.net/chszs NATS的连线协议是一个简单的.基于文本的公布 ...
- 应用程序无法正常启动 0xc0000013 vs2013
今天下午切换到Windows 优化代码,在debug 的时候一直出现这个问题,折腾了很久,发现原来是系统环境变量的问题,我之前装了双系统,讲原来win7 下的一块E盘删掉做了Linux 盘,而系统环境 ...
- mysql安装后改动port号password默认字符编码
1.改动password grant all privileges on *.* to 'root'@'localhost' identified by 'new password'; 2.改动por ...
- JPush 初始化失败,直接按照官方文档的格式写的,portal上的包名肯定不会错,mainfest里面直接指定${applicationId}
错误日志: 11-27 09:59:19.670 26124-26124/? D/dalvikvm: Late-enabling CheckJNI 11-27 09:59:20.008 26124-2 ...
- Silverlight 2学习笔记一:初识Silverlight
Silverlight,问世至今已有好一段时日了,向来只是只闻其名,不知其实,今天终于对Silverlight有了点初步的了解. 一.Silverlight是什么?Sliverlight是基于.NET ...
- php安全过滤类
/*ansic码-Url码表: http://www.w3school.com.cn/tags/html_ref_urlencode.html ---------------------------- ...
- codevs3287货车运输(最小生成树+LCA)
3287 货车运输 2013年NOIP全国联赛提高组 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 钻石 Diamond 题目描述 Description A 国有 ...
- [Swift通天遁地]六、智能布局-(1)给视图添加尺寸和中心点的约束
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- xfs文件备份恢复篇一vm中linux新增磁盘
XFS提供了 xfsdump 和 xfsrestore 工具协助备份XFS文件系统中的数据.xfsdump 按inode顺序备份一个XFS文件系统.centos7选择xfs格式作为默认文件系统,而且不 ...