1200字范文 > jQuery——淘宝购物车结算页面demo

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

时间：2019-02-05 10:46:53

效果

需求分析

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

商品列表勾选点击事件商品结算全选点击事件商品列表添加+减少 - 点击事件

拓展功能直接修改商品数量商品列表删除点击事件商品结算全删点击事件

思路及其实现

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><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"></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>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。