购物车编辑

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

实现了：全选/全不选（使用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案例：购物车编辑的更多相关文章

  1. 基于layui,Jquery 表格动态编辑 设置 编辑值为 int 或者 double 类型及默认值

    首先先推荐大家在看这篇笔记时,阅读过我写的这篇 Layui表格编辑[不依赖Layui的动态table加载] 阅读过上面那篇笔记之后呢,才能更好的理解我现在所要说的这个东西 接下来废话不多说,上代码. ...

  2. jQuery实现购物车多物品数量的加减+总价计算

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...

  3. Jquery实现购物车物品数量的加减特效

    今天网友翠儿在用Jquery实现购物车物品数量的加减特效的时候遇到问题来问我,我后来帮她解决了这个Jquery特效,现在把它整理出来分享给大家用,虽然功能比较简单,但是很实用. 主要包括了以下功能: ...

  4. jQuery实现购物车多物品数量的加减+总价+删除计算

    <?php session_start(); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...

  5. 扩展jquery easyui datagrid编辑单元格

    扩展jquery easyui datagrid编辑单元格 1.随便聊聊 这段时间由于工作上的业务需求,对jquery easyui比较感兴趣,根据比较浅薄的js知识,对jquery easyui中的 ...

  6. jQuery实现购物车物品数量的加减

    基于jquery的一款代码,实现购物车数据的加减,在淘宝网.京东商城购物时时经常见到的一个功能,点击文本框两侧的“+”与“-”,就可以增加或减少文本框内的数字值,每次步长为1,当然这个是可以自己设置的 ...

  7. 基于jQuery加入购物车飞入动画特效

    基于jQuery加入购物车飞入动画特效.这是一款电商购物网站常用的把商品加入购物车代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="main& ...

  8. jQuery实现购物车计算价格功能的方法

    本文实例讲述了jQuery实现购物车计算价格功能的简易方法,做的比较简单,现分享给大家供大家参考.具体如下: 目的: <%@ page language="java" con ...

  9. 实战Jquery(二)--能够编辑的表格

    今天实现的是一个表格的样例,通过获取表格的奇数行,设置背景色属性,使得奇偶行背景色不同.这个表格能够在单击时编辑,回车即更改为新输入的内容;ESC还原最初的文本.表格的实现思路非常清晰,仅仅是在实现的 ...

随机推荐

  1. 4G DTU模块带有MQTT协议吗？

    DTU作为一种通讯设备,其应用场合十分广泛.从广义上讲,在进行通信时,传输数据链路两端负责发送数据信息的模块单元都称之为DTU,在它的作用下对所传信息格式转换和数据整理校验.在狭义上的定义,DTU一般 ...

  2. Windows 端口被占用，但进程号对应的进程不存在，使用Get-Process来查找进程挺方便的

    Windows上很少安装数据库,这次遇到一个小问题:数据库启动之后提示: 警告: 无法为 "*" 创建监听套接字 致命错误: 无法创建TCP/IP套接字 日志: 数据库系统已关闭 ...

  3. Error: pg_config executable not found.

    pip 安装 psycopg2 安装及错误 现象: Error: pg_config executable not found. Please add the directory containing ...

  4. python开发基础(二)运算符以及数据类型之tuple(元组)

    # encoding: utf-8 # module builtins # from (built-in) # by generator 1.147 """ Built- ...

  5. uniapp使用axios以及封装错误重试解决方案

    在uniapp中,使用axios进行请求时,uniapp无法使用axios的适配器,需要基于uni.request来定义适配器. 安装完成axios后在项目utils目录下建一个axios文件夹 文中 ...

  6. Java入门（5）

    阅读书目:Java入门经典(第7版) 作者:罗格斯·卡登海德 protected变量只能在其所在的类,该类的子类,以及同一个包里的其他类中使用.包是一组用于完成相同目标的相关类. private变量只 ...

  7. UOJ Round总结

    #22. [UR #1]外星人 一开始随便搞出第一问答案,很显然的性质对$x$有变化的$a$一定是递减的,就拿一个桶直接记录可以达到的值 然后我开始想第二问,一开始想直接在这个桶上统计答案,然后发现不 ...

  8. ASP.NET Core框架揭秘[博文汇总-持续更新]

    第1部分 跨平台开发体验 1 跨平台开发体验 001 跨平台开发体验: Windows [上篇]         002 跨平台开发体验: Windows [中篇]        003 跨平台开发体 ...

  9. 关于H5页面在微信浏览器中音视频播放的问题

    Android 上,因为各个软件使用的浏览器渲染引擎不一样,所以视频播放的效果差异也很大,这里主要以微信为主.微信使用的是腾讯浏览器自带的X5内核. 而iOS是不允许使用第三方浏览器内核的,就是Goo ...

  10. C的输入&输出

    格式说明符 输出 %d整型输出,%ld长整型输出, %o以八进制数形式输出整数, %x以十六进制数形式输出整数,或输出字符串的地址. %u以十进制数输出unsigned型数据(无符号数).注意:%d与 ...