JQuery案例：购物车编辑

购物车编辑

实现了：商品的加减，总价的变动

实现了：全选/全不选（使用prop而不是attr）

实现了：删除（遮罩层）

<html>

	<head>

		<meta charset="UTF-8">

		<title>购物车</title>

	</head>

	<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>

	<style>

		.div1 {

			border: 1px solid gainsboro;

			width: 950px;

			height: 60px;

		}

		.div-checkbox,

		.div-goods,

		.div-amount,

		.div-unit-price,

		.div-price,

		.div-del {

			border: 1px solid;

			width: 60px;

			height: 20px;

			padding: 20px;

			float: left;

			text-align: center;

		}

		.div-price {

			width: 100px;

		}

		.div-goods {

			width: 140px;

		}

		.div-amount {

			width: 140px;

		}

		.div-unit-price {

			width: 50px;

		}

		.div-total-price {

			border: 1px solid gainsboro;

			width: 950px;

			height: 60px;

			text-align: right;

		}

		.div-submit {

			width: 950px;

			text-align: right;

		}

		div#cover {

			/*遮罩层*/

			position: absolute;

			top: 0;

			left: 0;

			width: 100%;

			height: 1000px;

			z-index: 100;

			display: none;

			background-color: grey;

		}

		div#prompt {

			/*弹窗*/

			border: 2px solid yellow;

			display: none;

			position: fixed;

			top: 100px;

			left: 500px;

			z-index: 101;

			width: 300px;

			height: 200px;

		}

	</style>

	<script>

		$(function() {

			//全选

			var i = 0;

			$(".allPic").click(function() {

				i++;

				if(i % 2 != 0) {

					//此处用attr则只能选中/取消一次

					$(".cls-checked").prop("checked", true);

				} else {

					$(".cls-checked").prop("checked", false);

				}

			});

			//通过name获取某一商品的按钮

			$("input[name='btn']").click(function() {

				//数量

				if($(this).val() == "+") {

					var $amount = $(this).prev();

					var num = parseInt($amount.val());

					$amount.val(++num);

				} else if($(this).val() == "-") {

					var $amount = $(this).next();

					var num = parseInt($amount.val());

					if(num > 1) {

						$amount.val(--num);

					}

				}

				// 本商品的总价

				var $unitPrice = $(".unit-price");

				$unitPrice.each(function() {

					var _unitPrice = $(this).text();

					var _amount = $(this).parent().prev().find("[type='text']").val();

					var _thisPrice = parseFloat(_unitPrice * 100 * _amount / 100).toFixed(2);

					var $thisPrice = $(this).parent().next().find(".this-price");

					$thisPrice.html(_thisPrice);

				});

				// 总价

				var _totalPrice = 0;

				var $eachPrice = $(".this-price");

				$eachPrice.each(function(index) {

					_totalPrice += parseFloat($(this).text());

				});

				$("#id-total-price").html(_totalPrice.toFixed(2));

			});

			//删除一条

			$(".div-del a").click(function() {

				showPrompt(this);

			});

		});

		function showPrompt(obj) {

			$("#cover").css("display", "block");

			// 10毫秒内透明度降为0.5

			$("#cover").fadeTo(10, 0.5);

			$("#prompt").css("display", "block");

			$("#prompt a").click(function() {

				$("#cover").css("display", "none");

				$("#prompt").css("display", "none");

				return;

			});

			$("#prompt input").click(function() {

				$("#cover").css("display", "none");

				$("#prompt").css("display", "none");

				$(obj).parent("div").parent("div").remove();

			});

		}

	</script>

	<body>

		<!--遮罩层-->

		<div id="cover"></div>

		<!--弹窗-->

		<div id="prompt">

			<div style="width: 100%;height: 20px;text-align: right;background-color: gray;">

				<a href="#">关闭</a>

			</div>

			<div style="text-align: center;background-color: white;width: 300px;height: 180px;line-height: 100px;">

				确认删除吗？

				<br />

				<input type="button" value="确定" />

			</div>

		</div>

		<!--表头------------------------------------------------------->

		<div class="div1">

			<div class="div-checkbox">

				<input type="checkbox" class="allPic"><b>全选</b></input>

			</div>

			<div class="div-goods"><b>项目</b></div>

			<div class="div-amount"><b>数量</b></div>

			<div class="div-unit-price"><b>单价</b></div>

			<div class="div-price"><b>小计</b></div>

			<div class="div-del"></div>

		</div>

		<!--第一行------------------------------------------------------->

		<div class="div1">

			<div class="div-checkbox">

				<input type="checkbox" class="cls-checked" />

			</div>

			<div class="div-goods">

				A

			</div>

			<div class="div-amount">

				<input type="button" value="-" name="btn" />

				<input type="text" size="1" value="1" />

				<input type="button" value="+" name="btn" />

			</div>

			<div class="div-unit-price">

				￥<span class="unit-price">2.00</span>

			</div>

			<div class="div-price">￥<span class="this-price">2.00</span></div>

			<div class="div-del">

				<a href="#">删除</a>

			</div>

		</div>

		<!--第二行------------------------------------------------------->

		<div class="div1">

			<div class="div-checkbox">

				<input type="checkbox" class="cls-checked" />

			</div>

			<div class="div-goods">

				B

			</div>

			<div class="div-amount">

				<input type="button" value="-" name="btn" />

				<input type="text" size="1" value="1" />

				<input type="button" value="+" name="btn" />

			</div>

			<div class="div-unit-price">

				￥<span class="unit-price">2.00</span>

			</div>

			<div class="div-price">￥<span class="this-price">2.00</span></div>

			<div class="div-del">

				<a href="#">删除</a>

			</div>

		</div>

		<div class="div-total-price">应付款额： ￥

			<span id="id-total-price">4.00</span>

		</div>

		<div class="div-submit">

			<input type="submit" />

		</div>

	</body>

</html>

JQuery案例：购物车编辑的更多相关文章

基于layui,Jquery 表格动态编辑设置编辑值为 int 或者 double 类型及默认值
首先先推荐大家在看这篇笔记时,阅读过我写的这篇 Layui表格编辑[不依赖Layui的动态table加载] 阅读过上面那篇笔记之后呢,才能更好的理解我现在所要说的这个东西接下来废话不多说,上代码. ...
jQuery实现购物车多物品数量的加减+总价计算
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...
Jquery实现购物车物品数量的加减特效
今天网友翠儿在用Jquery实现购物车物品数量的加减特效的时候遇到问题来问我,我后来帮她解决了这个Jquery特效,现在把它整理出来分享给大家用,虽然功能比较简单,但是很实用. 主要包括了以下功能: ...
jQuery实现购物车多物品数量的加减+总价+删除计算
<?php session_start(); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...
扩展jquery easyui datagrid编辑单元格
扩展jquery easyui datagrid编辑单元格 1.随便聊聊这段时间由于工作上的业务需求,对jquery easyui比较感兴趣,根据比较浅薄的js知识,对jquery easyui中的 ...
jQuery实现购物车物品数量的加减
基于jquery的一款代码,实现购物车数据的加减,在淘宝网.京东商城购物时时经常见到的一个功能,点击文本框两侧的“+”与“-”,就可以增加或减少文本框内的数字值,每次步长为1,当然这个是可以自己设置的 ...
基于jQuery加入购物车飞入动画特效
基于jQuery加入购物车飞入动画特效.这是一款电商购物网站常用的把商品加入购物车代码.效果图如下: 在线预览源码下载实现的代码. html代码: <div id="main& ...
jQuery实现购物车计算价格功能的方法
本文实例讲述了jQuery实现购物车计算价格功能的简易方法,做的比较简单,现分享给大家供大家参考.具体如下: 目的: <%@ page language="java" con ...
实战Jquery(二)--能够编辑的表格
今天实现的是一个表格的样例,通过获取表格的奇数行,设置背景色属性,使得奇偶行背景色不同.这个表格能够在单击时编辑,回车即更改为新输入的内容;ESC还原最初的文本.表格的实现思路非常清晰,仅仅是在实现的 ...

随机推荐

定位流之z-index属性
1.固定定位是脱离标准流的,不会占用标准流的空间 2.和绝对定位有点像,也不区分行内块级元素 3.类似于前面学的背景关联方式(让某个背景图片不随滚动而滚动)让某个元素不随着滚动条的滚动而滚动 ie6不 ...
专题二：redis的数据类型之string
一.redis的数据存储格式 redis本身是一个Map,其中所有的数据都是采用 "key:value"的方式进行存储的. 我们说的数据类型是数据存储的类型,也就是对应下图的val ...
工业级4G路由器有哪些优势
在金融.电力.邮政以及气象等各大行业中有着更为广泛的应用,并受到人们的高度推崇与青睐,那么工业级4G路由器有哪些优势深受用户的喜欢呢? 1.高稳定性工业级4G路由器在传输和接收数据时具有较高的稳定性 ...
部署LNMP环境
1.安装nginx yum -y install gcc pcre-devel openssl-devel tar xf nginx-1.16.1.tar.gz cd nginx-1.16.1/ ./ ...
Django做验证码登录
验证码关注公众号"轻松学编程"了解更多. 1.作用在用户登录,注册以及一些敏感操作的时候,我们为了防止服务器被暴力请求,或爬虫爬取,我们可以使用验证码进行过滤,减轻服务器的压力 ...
eyou去版权
公司老板要求做一个自己门户网站,苦于公司自己又没有开发相应的cms内容管理系统,找了一个星期,综合各方面的考虑,决定选择eyoucms来搭建,经过快速安装,来到了简单干净的后台. 现将使用体会记录如下 ...
TCP 三次握手和四次挥手图解（有限状态机）
传输控制协议(TCP,Transmission Control Protocol)是一种面向连接的.可靠的.基于字节流的传输层通信协议,由 IETF 的 RFC 793 定义,是为了在不可靠的互联网络 ...
Java线程状态及切换
Java线程状态及切换一.什么是Java线程状态在Java程序中,用于描述Java线程的六种状态: 新建(NEW):当前线程,刚刚新建出来,尚未启动. 运行(RUNNABLE):当前线程,处于竞争 ...
W3C中不同标准的含义
学习CSS/HTML的过程中,当出现释义冲突时,W3C(万维网联盟)官网所陈列的技术标准是最核心的判断参考.但是新手在查阅W3C标准索引页面时,会发现同一个属性或者模型会出现多个不同的阶段规范展示结果 ...

JQuery案例：购物车编辑

购物车编辑

JQuery案例：购物车编辑的更多相关文章

随机推荐

热门专题