先来看一下布局:
有两个功能需要实现:
1.清理购物车模块
2.选中商品添加背景颜色模块
一、清理购物车模块
1.有三个地方需要删除:①商品后面的删除按钮 ②删除选中的商品 ③清理购物车
2.商品后面的删除按钮点击之后一定是删除当前的商品
3.删除选中的商品:先判断小的复选框和按钮是否选中状态,如果是选中则删除对应的商品
4.每次删除事件中都要重新调用计算总价格和总数量的函数
二、选中商品添加背景颜色模块
1.全选按钮点击:如果全选是选中的则所有商品添加背景否则移除背景
2.小的复选框点击:如果是选中状态则当前商品添加背景否则移除背景
3.这个背景可以通过添加和移除类名来实现
完整代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../js/jquery.min.js"></script>
<title>数量添加</title>
<style>
* {
margin: 0;
padding: 0;
}
.bg {
background-color: #fdf4e8;
}
.wrapper {
width: 500px;
height: 100px;
/* background-color: pink; */
margin-top: 20px;
margin-left: 200px;
}
.change a {
float: left;
text-decoration: none;
color: #ccc;
width: 20px;
height: 25px;
border: 1px solid #cacbcb;
text-align: center;
line-height: 25px;
}
.change input {
float: left;
height: 25px;
width: 50px;
border: 1px solid #ccc;
border-left: 0;
border-right: 0;
outline: none;
text-align: center;
}
.wrapper .st {
float: left;
}
.wrapper .one {
float: left;
margin-left: 50px;
margin-right: 50px;
color: #746651;
}
.wrapper .total {
float: left;
margin-left: 50px;
color: #746651;
}
.footer {