购物车编辑

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

实现了：全选/全不选（使用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. Shell脚本实现----Kubernetes单集群二进制部署

     Shell脚本实现----Kubernetes单集群二进制部署   搭建Kubernetes集群环境有以下三种方式: 1. Minikube安装方式Minikube是一个工具,可以在本地快速运行一个 ...

  2. golang1.16内嵌静态资源指南

    今天是万圣节,也是golang1.16新特性冻结的日子.不得不说自从go2路线发布之后golang新特性的迭代速度也飞速提升,1.16中有相当多的重要更新,包括io标准库的重构,语言内置的静态资源嵌入 ...

  3. Luogu P4208 [JSOI2008]最小生成树计数

    题意 给定一个 \(n\) 个点 \(m\) 条边的图,求最小生成树的个数. \(\texttt{Data Range:}1\leq n\leq 100,1\leq m\leq 10^4\) 题解 一 ...

  4. LoRa联盟的简介

    LoRa联盟成立于2015年3月,从成立开始,LoRaWAN规范就在不断更新,从1.0.0版本已更新至1.0.2版本,目前能公开下载的事2016年7月完成的1.0.2版本,可以看到该规范的主要作者包括 ...

  5. SpringBoot第五集：整合监听器/过滤器和拦截器（2020最新最易懂）

    SpringBoot第五集:整合监听器/过滤器和拦截器(2020最新最易懂) 在实际开发过程中,经常会碰见一些比如系统启动初始化信息.统计在线人数.在线用户数.过滤敏/高词汇.访问权限控制(URL级别 ...

  6. MySQL索引分析及使用

    一.索引介绍 1.1.什么是索引? 一般的应用系统,读写比例在10:1左右,而且插入操作和一般的更新操作很少出现性能问题,在生产环境中,我们遇到最多的,也是最容易出问题的,还是一些复杂的查询操作,因此 ...

  7. c++11-17 模板核心知识（三）—— 非类型模板参数 Nontype Template Parameters

    类模板的非类型模板参数 函数模板的非类型模板参数 限制 使用auto推断非类型模板参数 模板参数不一定非得是类型,它们还可以是普通的数值.我们仍然使用前面文章的Stack的例子. 类模板的非类型模板参 ...

  8. OJ-2:区间问题【九度1554】

      题目描述: 给定一个数组,判断数组内是否存在一个连续区间,使其和恰好等于给定整数k. 输入: 输入包含多组测试用例,每组测试用例由一个整数n(1<=n<=10000)开头,代表数组的大 ...

  9. MFC的Static控件文字重叠问题

    写个普通的MFC桌面程序,为了美化界面用了界面库,然后界面上的静态文本就出现了重叠的效果,就像下面这样: 但是窗口被刷新一下就好了,比如被遮挡后恢复的时候.在程序中可以手动加入以下代码: void C ...

  10. SpringBoot第七集：异常处理与整合JSR303校验（2020最新最易懂）

    SpringBoot第七集:异常处理与整合JSR303校验(2020最新最易懂) 一.SpringBoot全局异常 先讲下什么是全局异常处理器? 全局异常处理器就是把整个系统的异常统一自动处理,程序员 ...