效果
需求分析
每一件复杂的事情都是由简单的事情构成,将简单的事做好了,复杂的事自然就做好了
- 商品列表 勾选点击事件
- 商品结算 全选点击事件
- 商品列表 添加+减少 - 点击事件
拓展功能 直接修改商品数量 - 商品列表 删除点击事件
- 商品结算 全删点击事件
思路及其实现
- 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>