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)
一,为什么要使用消息队列实现删除购物车商品功能? 消息队列主要用来处理不需要立刻返回结果的业务, 常见的例子: 用户在下单后,要清除原购物车中的商品, 这个处理过程不需要马上实现也不需要返回结果给用户 ...
随机推荐
- Google2015校招在线測试题1----扫雷最少点击次数
Problem Minesweeper is a computer game that became popular in the 1980s, and is still included in so ...
- BZOJ 1798: [Ahoi2009]Seq 维护序列seq (线段树乘法加法的混合操作)
题目:点击打开链接 大意:一个数组.三个操作.第一种是区间[a,b]每一个数乘乘,另外一种是区间[a,b]每一个数加c,第三种是查询[a,b]区间的和并对p取摸. 两种操作就不能简单的仅仅往下传 ...
- Application.StartupPath获取执行文件路径substring()取特定长度字符串取得根目录
Application.StartupPath获取执行文件路径substring()取特定长度字符串取得根目录 2012-07-20 10:48 257人阅读 评论(0) 收藏 举报 path usi ...
- ajax异步文件上传和进度条
一.ajax异步文件上传 之前有说过在form表单内的文件上传,但是会刷新页面,下面就来实现不刷新页面的异步文件上传 <div class="uploding_div"> ...
- bzoj1106
模拟+树状数组 先开始以为是先删距离最小的,这样可以减小上下的距离,然后觉得很难写,看码长很短,就看了题解,结果很奥妙 我们只考虑两种元素,就是如果像-a-b-a-b-这样的肯定得交换,如果像-a-b ...
- codevs1293送给圣诞夜的极光(bfs)
1293 送给圣诞夜的极光 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题目描述 Description 圣诞老人回到了北极圣诞区,已经快到12点了 ...
- JS中的this是什么,this的四种用法
在Javascript中,this这个关键字可以说是用的非常多,说他简单呢也很简单,说他难呢也很难,有的人开发两三年了,自己好像也说不清this到底是什么.下面我们来看看: 1.在一般函数方法中使用 ...
- $CF41D\ Pawn$
\(problem\) 与这题 灰常的相似 然后内存可能过大 开个滚动数组 因为数塔问题总是 只需要上面一行的两个状态(这题就是数塔问题) 下面的代码与原题不符.(原题要输出路径)想抄的可以走了 输出 ...
- NS2学习笔记(二)
Tcl语言 变量和变量赋值 set a "Hello World!" #将字符串赋值给变量a puts "NS2 say $a" #输出字符串的内容,其中$a表 ...
- hdu2027
http://acm.hdu.edu.cn/showproblem.php?pid=2027 #include<iostream> #include<stdio.h> #inc ...