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

效果

需求分析

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

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

思路及其实现

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>

jQuery——淘宝购物车结算页面demo相关推荐

淘宝购物车web页面模仿
采用HTML+CSS+原生JS手写,未使用组件开发. 效果图如下: 初始页面效果目前可以实现动态添加商品,通过随机函数生成随机数,从已有的数据中选择商品数据添加到页面,生成的商品可以从列表中删除: ...
淘宝购物车页面 PC端和移动端实战
最近花了半个月的时间,做了一个淘宝购物车页面的Demo.当然,为了能够更加深入的学习,不仅仅有PC端的固定宽度的布局,还实现了移动端在Media Query为768px以下(也就是实现了ipad,ip ...
bootstrap淘宝购物车添加结算代码
bootstrap淘宝购物车添加结算代码 jQuery制作淘宝商品购物车系统,支持全选.增加或减少.商品数量累计等功能.这是一款bootstrap布局的购物车结算页面设计代码. 演示地址下载地址
仿淘宝购物车demo 增加和减少商品数量
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 在上一篇 ...
HTML淘宝购物车页面的实现
一.实验目的和要求本实验任务用HTML基本标签制作一个简单的淘宝购物车页面,具体要求如下: 以纯文本格式保存为*.html文件使用表格标签.div标签.span标签.图像标签等实现效果设计启用浏 ...
淘宝购物车页面智能搜索框Ajax异步加载数据
如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...
python+selenium+chrome实现淘宝购物车秒杀自动结算
python+selenium+chrome实现淘宝购物车秒杀自动结算一.所需环境二.安装三.代码最后run()一把就ok了!! 之前总是想要买aj,但是淘宝店铺每次发售手动抢的时候一般都会被 ...
淘宝购物车页面测试用例
淘宝购物车的功能测试点有很多,这里我只写一部分,如图: 欢迎补充!!!!!!!!
淘宝购物车前端（JS和Angularjs版本)
今天用HTML和JS实现以下购物车,然后再用Angualrjs再去实现一下购物车的前端实现. 功能页面分析: 既然是做模仿淘宝购物车,肯定要先去分析一下淘宝的购物车页面,自己去淘宝卖了两件东西,看了下 ...
测试网页版淘宝购物车
测试网页版淘宝购物车界面测试: 1. 购物车页面布局是否合理,显示是否完整 2. 鼠标浮动在购物车图标,迷你购物车界面显示是否正常 3. 不同店铺的商品在不同的区域正确显示 4. 页面的菜单功能栏正 ...

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

效果

需求分析

思路及其实现

完整源码

jQuery——淘宝购物车结算页面demo相关推荐

最新文章

热门文章