购物车编辑

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

实现了：全选/全不选（使用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. jenkins任务

    #################################jenkins任务1.打包.持续集成.部署.定时运行 2.创建自由风格的一个任务 3.一个任务的核心步骤就是,build即创建,即运行 ...

  2. dubbo2.7.X版本带来的服务注册和服务调用方式改变

    参考地址:https://www.cnblogs.com/alisystemsoftware/p/13064620.html 注册中心数据结构格式改变(service:接口服务,application ...

  3. 直播软件开发之Java音视频解决方案：音视频基础知识

    概念 从信息论的观点来看,描述信源的数据是信息和数据冗余之和,即:数据=信息+数据冗余.音频信号在时域和频域上具有相关性,也即存在数据冗余.将音频作为一个信源,音频编码的实质是减少音频中的冗余. 拟信 ...

  4. C++实现学校运动会管理系统

    本文实例为大家分享了C++实现学校运动会管理系统的具体代码,供大家参考,具体内容如下 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 ...

  5. 利用MultipartFile来进行文件上传

    这个例子实在SpringMVC的基础上完成的,因此在web.xml中需要配置 web.xml <!-- 配置Spring MVC的入口 DispatcherServlet,把所有的请求都提交到该 ...

  6. MSSQL 模糊搜索全文（过程、函数、触发器等）

    --SQL Server数据库查找含有某个关键字的存储过程.函数.触发器等 --SQL Server数据库查找含有某个关键字的存储过程,SQL语句如下: SELECT OBJECT_NAME(b.pa ...

  7. 内网安装python第三方包

    内网快速安装python第三方包 内网安装包是一个很麻烦的问题,很多时候,内网的源会出现问题,导致无法安装. 这里给出一种快速在内网中安装第三方包,无需使用内网的源. 外网操作 1.根据开发环境下的所 ...

  8. PyQt5播放实时视频流或本地视频文件

    目录 编辑UI 新建视频播放类Display 打开相机 关闭相机 显示视频画面 完整源代码 效果图 编辑UI 编辑UI如下图所示: 新建视频播放类Display 定义如下初始化函数 def __ini ...

  9. Android 架构组件-Lifecycle、LiveData、ViewModel

    Lifecycle Lifecycle组件包括LifecycleOwner.LifecleObserver,能方便监听Activity或者Fragment的生命周期. 步骤: 1.实现Lifecycl ...

  10. git操作之二：git restore

    在上篇博客中留了一个问题,那就是git restore命令是做什么的,下面重点分析. 一.概述 git restore命令是撤销的意思,也就是把文件从缓存区撤销,回到未被追踪的状态. 该命令有git ...