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

其他 2020-09-07 13:35:43 阅读次数: 0

效果

在这里插入图片描述

需求分析

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

在这里插入图片描述

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

思路及其实现

  • 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>

猜你喜欢

转载自blog.csdn.net/weixin_44757417/article/details/108036465
今日推荐
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
周排行
Java基础复习_day13_Collection集合
2018.11.16 c语言学习经验
且看Java内置四大核心函数式接口
小程序云开发中数据库的数据分段和显示图片
python的函数
Web-JS进阶
【干货】C++常用代码积累笔记大全
Spring的ioc操作 与 IOC底层原理
构建之法20191121-11 Scrum立会报告+燃尽图 07
Spring boot之Hello World访问404
每日归档
更多
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022