购物车编辑

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

实现了：全选/全不选（使用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. python给图片打马赛克

    图片马赛克 关注公众号"轻松学编程"了解更多. 导包 import numpy as np import matplotlib.pyplot as plt %matplotlib ...

  2. 转载-Java匿名内部类

    作者: chenssy 出处: http://www.cnblogs.com/chenssy/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接, ...

  3. ABP框架中一对多，多对多关系的处理以及功能界面的处理（1）

    在我们开发业务的时候,一般数据库表都有相关的关系,除了单独表外,一般还包括一对多.多对多等常见的关系,在实际开发过程中,需要结合系统框架做对应的处理,本篇随笔介绍基于ABP框架对EF实体.DTO关系的 ...

  4. tensorflow的广播机制

    TensorFlow支持广播机制(Broadcast) TensorFlow支持广播机制(Broadcast),可以广播元素间操作(elementwise operations).正常情况下,当你想要 ...

  5. 如何使用 gitlab 或 github 执行npm run build

    一: 如何快速搭建一个组件库 首先,我们介绍一个快速包装组件库的工具:https://github.com/yanhaijing/jslib-base     按照文档来,就简单几步: npx @js ...

  6. JS模拟百度分享侧边栏效果

    模拟百度分享侧边栏的弹出与滑入效果.当鼠标移入#div1分享侧边栏,#div1分享侧边栏区块匀速滑出直至其全部露出.当鼠标移除#div1分享侧边栏,#div1分享侧边栏区块匀速滑入隐藏,直至恢复初始位 ...

  7. Python的ConfigParser模块读取ini配置文件 报错（持续更新总结）

    1.ConfigParser.MissingSection什么的错误巴拉巴拉一堆,其实根本上就是没有读到配置文件,然后我去检查了一遍路径,发现没有问题,我是将文件的路径作为一个字符串拼接好传到另一个专 ...

  8. 【java从入门到精通】day08-java流程控制-用户交互Scanner--顺序结构--选择结构

    1.java流程控制 Scanner对象: Java提供了一个工具类,可以获取用户的输入 java.until.Scanner是Java5的新特征,我们可以通过Scanner类来获取用户的输入 基本语 ...

  9. 阻塞队列的take、offer、put、add的一些比较

    LinkedBlockingQueue的put,add和offer的区别 最近在学习<<Java并发编程实践>>,有很多java.util.concurrent包下的新类.Li ...

  10. ceph的pg平衡插件balancer

    前言 ceph比较老的版本使用的reweight或者osd weight来调整平衡的,本篇介绍的是ceph新的自带的插件balancer的使用,官网有比较详细的操作手册可以查询 使用方法 查询插件的开 ...