查看本章节

查看作业目录

需求说明：

  • 利用 jQuery 操作页面元素的方法，实现电商网站购物车页面商品数量的增加和减少操作，要求单项价格和总价随着数量的改变而改变
  • 当用户单击“+”按钮时，文本框中的商品数量增加 1，单项价格和总价相应地增加
  • 点击“-”按钮，文本框中的数量减 1（不能小于 1），单项价格和总价相应地减少

实现思路：

  1. 声明 calPrice() 函数，根据商品的单价和数量计算单项价格，当点击改变数量的按钮时，调用 calPrice() 函数，及时刷新单项价格
  2. 声明 calTotalPrice() 函数，计算所有商品的总价格。当点击改变数量的按钮时，调用 calTotalPrice() 函数，及时刷新所有商品的应付总额
  3. 在页面加载完毕事件中，给“+”按钮的点击事件绑定方法，实现在原基础上数量增加 1 的功能，并调用calPrice() 和 calTotalPrice() 方法实现价格和数量的联动
  4. 在页面加载完毕事件中，给“-”按钮的点击事件绑定方法，实现在原基础上数量减少 1 的功能，并调用calPrice() 和 calTotalPrice() 方法实现价格和数量的联动

实现代码：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<style type="text/css">

			table{

				border: 1px solid #dedede;

				border-collapse: collapse;

				width: 100%;

			}

			table tr{

				height: 50px;

				border-bottom: 1px dashed #DEDEDE;

			}

			table td,th{

				text-align: center;

				vertical-align: middle;

			}

			table td.item{

				width: 400px;

				height: 60px;

				text-align: left;

			}

			table td.item img{

				margin-right: 10px;

				vertical-align: middle;

			}

			table tr td.cal{

				text-align: right;

			}

			table tr td.cal span{

				font: bold 25px geneva,verdana,sans-serif;

				color: orange;

			}

			table .btn{

				border: 1px solid #dedede;

				background-color: white;

				width: 16px;

				height: 16px;

			}

			table .txt{

				width: 60px;

				height: 30px;

				border: 1px solid #dedede;

				text-align: center;

				font: bold 15px/30px geneva,verdana,sans-serif;

			}

			table .txt:hover{

				border: 1px solid red;

			}

		</style>

		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>

		<script type="text/javascript">

			$(function(){

				//在增加数量的按钮上绑定单击事件

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

					var txtObj = $(this).siblings("input[type='text']");//获取输入框

					console.log(txtObj);

					var number = parseInt(txtObj.val());

					txtObj.val(number+1);

					//计算单个商品价格

					calPrice($(this),number+1);

					//计算商品总价

					calTotalPrice();

				});

				//在减少的数量的按钮上绑定单击事件

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

					var txtObj = $(this).siblings("input[type='text']");//获取输入框

					var number = parseInt(txtObj.val());

					if(number>1){

						txtObj.val(number-1);

						//计算单个商品价格

						calPrice($(this),number-1);

						//计算商品总价

						calTotalPrice();

					};

				})

				//参数$btnObj代表增减数量的按钮，number是商品的数量

				function calPrice($btnObj,number){

					var $tdObj = $btnObj.parent().next(); //获取显示商品单价的td单元格

					var price = parseFloat($tdObj.text().substr(1));//从￥截取，获取单价

					var $tdTotal = $tdObj.next();//获取紧邻的同胞元素，即显示商品小计的单元格

					var total = price*number;//计算单个商品价格

					$($tdTotal).html("&yen;"+total.toFixed(2));//商品小计保留小数点后两位

				}

				//计算商品列表中所有商品的总价

				function calTotalPrice(){

					//保存总价

					var sum = 0;

					//遍历表格中title=‘price’属性的单元格

					$("td[title='price']").each(function(index,element){

						sum += parseFloat($(this).text().substr(1));//价格累加

					});

					//显示总价

					$("#spanTotal").html("&yen;"+sum.toFixed(2));

				}

			});

		</script>

	</head>

	<body>

		<table id="tabOrder">

			<th>项目</th>

			<th>状态</th>

			<th>类型、数量</th>

			<th>单价</th>

			<th>小计</th>

			<tr>

				<td class="item">

					<a href="#">

						<img src="img/img_1.jpg" align="left" width="100px"/>

						欢乐空间量版式KTV：欢唱套餐2选1，国家法定节假日需到店另付20元，可升级

					</a>

				</td>

				<td>可购买</td>

				<td>

					<input type="button" value="-" class="btnMinus"/>

					<input type="text" class="text" value="1" disabled="disabled"/>

					<input type="button"  value="+" class="btnAdd"/>

				</td>

				<td>&yen;39.9</td>

				<td title="price">&yen;39.9</td>

			</tr>

			<tr>

				<td class="item">

					<a href="#">

						<img src="img/img_2.jpg" align="left" width="100px"/>

						途乐时尚主题量版式KTV，任选1小时欢唱可升级，提供免费WiFi

					</a>

				</td>

				<td>可购买</td>

				<td>

					<input type="button" value="-" class="btnMinus"/>

					<input type="text" class="text" value="1" disabled="disabled"/>

					<input type="button"  value="+" class="btnAdd"/>

				</td>

				<td>&yen;59.9</td>

				<td title="price">&yen;59.9</td>

			</tr>

			<tr >

				<td colspan="5" class="cal">

					已选<span>2</span>件商品 应付金额：<span id="spanTotal">&yen;99.8</span>

				</td>

			</tr>

		</table>

	</body>

</html>

利用 jQuery 操作页面元素的方法，实现电商网站购物车页面商品数量的增加和减少操作，要求单项价格和总价随着数量的改变而改变的更多相关文章

  1. Flutter实战视频-移动电商-61.购物车_商品数量的加减操作

    61.购物车_商品数量的加减操作 provide/cart.dart pages/cart_page/cart_count.dart 先引入provide和cartProvide 定义接收一个item ...

  2. 使用 jQuery 操作页面元素的方法，实现浏览大图片的效果，在页面上插入一幅小图片，当鼠标悬停到小图片上时，在小图片的右侧出现与之相对应的大图片

    查看本章节 查看作业目录 需求说明: 使用 jQuery 操作页面元素的方法,实现浏览大图片的效果,在页面上插入一幅小图片,当鼠标悬停到小图片上时,在小图片的右侧出现与之相对应的大图片 实现思路: 在 ...

  3. JQuery调用iframe父页面元素与方法

    JQuery操作iframe父页面与子页面的元素与方法 下面简单使用Jquery来操作iframe的一些记录,这个使用纯JS也可以实现. 第一.在iframe中查找父页面元素的方法: $('#id', ...

  4. iframe子页面获取父页面元素的方法

    在iframe子页面获取父页面元素 代码如下: $.('#objld', parent.document); 在父页面获取iframe子页面的元素 代码如下: $("#objid" ...

  5. 利用jquery实现电商网站常用特效之：五星评分

    这篇文章主要为大家详细介绍了基于jquery实现五星好评,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 在电商网站,我们经常会用到五星评分的功能,现在用jQuery实现一个简单的demo: 1.引 ...

  6. 电商网站jQuery放大镜代码

    分享一款电商网站jQuery放大镜代码.这是一款基于jquery.elevatezoom插件实现的类似淘宝放大镜代码,提供40多种参数,可自由配置多种效果,适合电商或图片类网站使用.效果图如下: 在线 ...

  7. 利用jquery给指定的table动态添加一行、删除一行，复制，值不重复等操作

    $("#mytable tr").find("td:nth-child(1)") 1表示获取每行的第一列$("#mytable tr").f ...

  8. css隐藏页面元素的方法

    用css隐藏页面元素有许多种方法. 第一种方法[opacity: 0;] opacity属性通常用于设置一个元素的透明度,从另一个角度来看,如果透明度为0,也就从视觉上隐藏了该元素. 这个属性不是为改 ...

  9. ifram父页面、子页面元素及方法的获取调用

    page1 父页面 <div id="ifram" class="parent1"> <iframe frameborder="0& ...

随机推荐

  1. hashtable深度探索

    1.什么是哈希表(hashtable)?为什么要发明哈希表? 首先回答第二个问题,在之前的数据结构中我们学习了数组,链表,二叉树等数据结构,记录在结构中的相对位置是随机的,和记录的关键字之前不存在确定 ...

  2. oracle中注释都是问号？中文显示不出来问题

    本人在工作中需要把开发上的库恢复到自己的虚拟机里面,然而捣鼓了许久建立好数据库之后,在使用建表语句初始化表的时候,发现注释都是????? 然后一脸懵逼不知何解,网上一大堆是说修改环境变量 NLS_LA ...

  3. CentOS6+nginx+uwsgi+mysql+django1.6.6+python2.6.6

    1.配置网关 #vi /etc/sysconfig/network NETWORKING=yes(表示系统是否使用网络,一般设置为yes.如果设为no,则不能使用网络,而且很多系统服务程序将无法启动) ...

  4. Spring Boot Actuator:健康检查、审计、统计和监控

    Spring Boot Actuator可以帮助你监控和管理Spring Boot应用,比如健康检查.审计.统计和HTTP追踪等.所有的这些特性可以通过JMX或者HTTP endpoints来获得. ...

  5. 观察者模式之spring事件机制

    ddsspring中的事件机制使用到设计模式中的观察者模式 ,观察者模式有两个概念,1.观察者.被观察者.2.被观察者做出相应得动作,观察者能接收到.不分析设计模式,学习下spring中的事件机制实际 ...

  6. MyBatis一对多映射简单查询案例（嵌套结果）

    一.案例描述 书本类别表和书本信息表,查询书本类别表中的某一记录,连带查询出所有该类别书本的信息. 二.数据库表格 书本类别表(booktypeid,booktypename) 书本信息表(booki ...

  7. Jenkins动态选择分支/tag

    目录 一.简介 二.配置 三.配置tag 四.其它方法 五.List Git Branches插件 一.简介 一般选择分支构建,Git Parameter插件即可.这里是应用pipline的同时,可以 ...

  8. 磁盘管理LVM

    目录 一.简介 二.操作 环境简介 操作 一.简介 LVM全称为Logical Volume Management,它是Linux环境下对磁盘分区进行管理的一种机制,它可以将多个硬盘合成一个资源池,然 ...

  9. xmake v2.6.2 发布，新增 Linux 内核驱动模块构建支持

    Xmake 是一个基于 Lua 的轻量级跨平台构建工具. 它非常的轻量,没有任何依赖,因为它内置了 Lua 运行时. 它使用 xmake.lua 维护项目构建,相比 makefile/CMakeLis ...

  10. 筛选Table.SelectRows-文本与数值（Power Query 之 M 语言）

    数据源: 包含文本与数值的任意数据 目标: 对文本和数值进行筛选 M公式: = Table.SelectRows( 表, 筛选条件) 筛选条件: 等于:each [指定列] = "指定值&q ...