jQuery——淘宝购物车结算页面demo

最新推荐文章于 2022-10-19 22:56:10 发布

Silent Land

最新推荐文章于 2022-10-19 22:56:10 发布

阅读量7k

点赞数 16

分类专栏： # jQuery 文章标签： jquery javascript node.js

本文链接：https://blog.csdn.net/weixin_44757417/article/details/108036465

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

效果

在这里插入图片描述

需求分析

每一件复杂的事情都是由简单的事情构成，将简单的事做好了，复杂的事自然就做好了

在这里插入图片描述

商品列表勾选点击事件
商品结算全选点击事件
商品列表添加+减少 - 点击事件
拓展功能直接修改商品数量
商品列表删除点击事件
商品结算全删点击事件

思路及其实现

1.商品列表勾选点击事件全选
- 通过prop()方法将全选按钮的状态设置给列表清单

	// 1.商品列表	勾选点击事件 全选
	$('#checked-all-bottom').click(function () {
	$('.goods-list-item').prop('checked', $(this).prop('checked'));
	// 展示总金额和总数量
	showTotalMoney();
			});

2.商品结算列表点击事件
- 判断列表是否全部选中，全部选中则全选按钮勾上
  - 通过：checked获得选中的数量与列表清单比较相等则全部选中

	// 2.商品结算 	列表点击事件
	$('.goods-list-item').click(function () {
	$('#checked-all-bottom').prop('checked', $('.goods-list-item').length == $(
					'.goods-list-item:checked').length);
	// 展示总金额和总数量
	showTotalMoney();
			});

3.商品列表添加+减少 - 点击事件
- 获取当前按钮所在的商品下标（有了下标就知道用户操作的是第几个商品）
- 通过hasClass()方法判断点击的是加号还是减号
- 通过DOM对象 $('.goods-count').eq(index)[0].value++;改变值
- 减号所减数量必须大于0
- 单价 * 数量 = 总价格

	// 3.商品列表 	添加+减少 - 点击事件
	$('.car-decrease,.car-add').click(function () {
	// 3.1.获取当前按钮所在的商品下标（有了下标就知道用户操作的是第几个商品）
	let index = $(this).parents('.goods-item').index();
	if ($(this).hasClass('car-add')) { //增加
			$('.goods-count').eq(index)[0].value++;

		} else {
		// 减到0则不能再减
		// 关系运算符会把其他数据类型转换成number之后再比较关系
		if ($('.goods-count').eq(index).val() > 0) {
		$('.goods-count').eq(index)[0].value--;
			}
		}
	// 3.2.修改商品总价格
	$('.single-total').eq(index).text($('.goods-count').eq(index).val() * $('.single-price').eq(index)
					.text());
	// 展示总金额和总数量
	showTotalMoney();
			});

拓展功能直接修改数量
- 获取当前按钮所在的商品下标（有了下标就知道用户操作的是第几个商品）

	// 拓展功能：输入框失去焦点
	$('.goods-count').blur(function () {
	// 1.获取当前元素所在的商品下标
	let index = $(this).parents('.goods-item').index();
	$('.single-total').eq(index).text($('.single-price').eq(index).text() * 		 $('.goods-count').eq(index).val());
	// 展示总金额和总数量
   showTotalMoney();
			});

4.商品列表删除点击事件
- 找到商品所在的父级元素调用remove();方法

// 4.商品列表	删除点击事件
	$('.item-delete').click(function () {
	if (confirm('确定要删除？')) {
	$(this).parents('.goods-item').remove();
	// 展示总金额和总数量
	showTotalMoney();
		}
	});

5.商品结算全删点击事件
- 调用empty()；方法

	// 5.商品结算 	全删点击事件
	$('#deleteMulty').click(function () {
	if (confirm('确定要清空所有的商品？')) {
	$('.goods-content').empty();
	$('#checked-all-bottom').prop('checked',false);
	// 展示总金额和总数量
	showTotalMoney();
		}
	});

封装展示金额和总数量的函数
- 箩筐思想
- 1.准备两个空箩筐
- 2.遍历萝卜数
- 3.判断每一个列表里面的勾选按钮是否选中，选中则放入箩筐

	// 封装展示金额和总数量的函数
	function showTotalMoney() {
	// 一：箩筐思想求和：固定三个步骤
	// 1.声明空箩筐
		let sumMoney = 0; //总金额
		let sumCount = 0; //总数量
		// 2.遍历萝卜堆数：获取每一个商品列表
		for (let i = 0; i < $('.goods-item').length; i++) {
		// 判断每一个列表里面的勾选按钮是否选中
		if ($('.goods-list-item').eq(i).prop('checked')) {
				// 3.放入箩筐
				// 注意点：默认元素文本是字符串需要转成数字之后再来做加法运算
				sumCount += +$('.goods-count').eq(i).val();
				sumMoney += +$('.single-total').eq(i).text();
					}
				};
			// 二：求和结束，显示到页面
			$('#selectGoodsCount').text(sumCount);
			$('#selectGoodsMoney').text(sumMoney);

		};

完整源码

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title>购物车结算页面</title>
	<!-- bootstrap三个文件 -->
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
	<link type="text/css" rel="stylesheet" href="css/style.css" />
	<!-- 模拟服务器：动态加载页面数据 （暂时不做研究） -->
	<script type="text/javascript" src="js/script.js"></script>
</head>

<body>
	<div class="shopping-car-container">
		<div class="car-headers-menu">
			<div class="row">
				<div class="col-md-1 car-menu">
					<label><span id="checkAll">全选</span></label>
				</div>
				<div class="col-md-3 car-menu">商品信息</div>
				<div class="col-md-3 car-menu">商品参数</div>
				<div class="col-md-1 car-menu">单价</div>
				<div class="col-md-1 car-menu">数量</div>
				<div class="col-md-1 car-menu">金额</div>
				<div class="col-md-2 car-menu">操作</div>
			</div>
		</div>
		<div class="goods-content">
			<!--goods display-->
		</div>
		<div class="panel panel-default">
			<div class="panel-body bottom-menu-include">
				<div class="col-md-1 check-all-bottom bottom-menu">
					<label>
						<input type="checkbox" id="checked-all-bottom" />
						<span id="checkAllBottom">全选</span>
					</label>
				</div>
				<div class="col-md-1 bottom-menu">
					<span id="deleteMulty">
						删除
					</span>
				</div>
				<div class="col-md-6 bottom-menu">

				</div>
				<div class="col-md-2 bottom-menu">
					<span>已选商品 <span id="selectGoodsCount">0</span> 件</span>
				</div>
				<div class="col-md-1 bottom-menu">
					<span>合计：<span id="selectGoodsMoney">0.00</span></span>
				</div>
				<div class="col-md-1 bottom-menu submitData submitDis">
					结算
				</div>
			</div>
		</div>
	</div>
	<script src="./js/jquery.min.js"></script>
	<script>
		//入口函数 ：  等DOM树 + 外部资源路径加载完毕后执行
		//实际开发中页面数据不是写死的，而是从服务器加载，需要一会儿时间
		// 如果不用入口函数则需使用委托
		window.onload = function () {
			/* 需求分析：
			1.商品列表	勾选点击事件
			2.商品结算 	全选点击事件
			3.商品列表 	添加+减少 - 点击事件
			  拓展功能	直接修改商品数量
			4.商品列表	删除点击事件
			5.商品结算 	全删点击事件

			*/
			// 1.商品列表	勾选点击事件 全选
			$('#checked-all-bottom').click(function () {
				$('.goods-list-item').prop('checked', $(this).prop('checked'));
				// 展示总金额和总数量
				showTotalMoney();
			});

			// 2.商品结算 	列表点击事件
			$('.goods-list-item').click(function () {
				$('#checked-all-bottom').prop('checked', $('.goods-list-item').length == $(
					'.goods-list-item:checked').length);
				// 展示总金额和总数量
				showTotalMoney();
			});



			// 3.商品列表 	添加+减少 - 点击事件
			$('.car-decrease,.car-add').click(function () {
				// 3.1.获取当前按钮所在的商品下标（有了下标就知道用户操作的是第几个商品）
				let index = $(this).parents('.goods-item').index();
				if ($(this).hasClass('car-add')) { //增加
					$('.goods-count').eq(index)[0].value++;

				} else {
					// 减到0则不能再减
					// 关系运算符会把其他数据类型转换成number之后再比较关系
					if ($('.goods-count').eq(index).val() > 0) {
						$('.goods-count').eq(index)[0].value--;
					}
				}
				// 3.2.修改商品总价格
				$('.single-total').eq(index).text($('.goods-count').eq(index).val() * $('.single-price').eq(index)
					.text());
				// 展示总金额和总数量
				showTotalMoney();

			});
			// 拓展功能：输入框失去焦点
			$('.goods-count').blur(function () {
				// 1.获取当前元素所在的商品下标
				let index = $(this).parents('.goods-item').index();
				$('.single-total').eq(index).text($('.single-price').eq(index).text() * $('.goods-count').eq(
					index).val());
				// 展示总金额和总数量
				showTotalMoney();
			});

			// 4.商品列表	删除点击事件
			$('.item-delete').click(function () {
				if (confirm('确定要删除？')) {
					$(this).parents('.goods-item').remove();
					// 展示总金额和总数量
					showTotalMoney();
				}
			});

			// 5.商品结算 	全删点击事件
			$('#deleteMulty').click(function () {
				if (confirm('确定要清空所有的商品？')) {
					$('.goods-content').empty();
					$('#checked-all-bottom').prop('checked',false);
					// 展示总金额和总数量
					showTotalMoney();
				}
			});

			// 封装展示金额和总数量的函数
			function showTotalMoney() {
				// 一：箩筐思想求和：固定三个步骤
				// 1.声明空箩筐
				let sumMoney = 0; //总金额
				let sumCount = 0; //总数量
				// 2.遍历萝卜堆数：获取每一个商品列表
				for (let i = 0; i < $('.goods-item').length; i++) {
					// 判断每一个列表里面的勾选按钮是否选中
					if ($('.goods-list-item').eq(i).prop('checked')) {
						// 3.放入箩筐
						// 注意点：默认元素文本是字符串需要转成数字之后再来做加法运算
						sumCount += +$('.goods-count').eq(i).val();
						sumMoney += +$('.single-total').eq(i).text();

					}

				};
				// 二：求和结束，显示到页面
				$('#selectGoodsCount').text(sumCount);
				$('#selectGoodsMoney').text(sumMoney);

			};

		}
	</script>
</body>

</html>