jQuery实现简单购物车页面

时间 2020-05-08

标签 jquery 实现简单购物车页面栏目 JQuery 繁體版

原文原文链接

功能描述：javascript

当全选按钮被按下时，全部商品的小复选框（以及另一个全选按钮）的选中状态跟按下的全选按钮保持一致；css

当用户选中商品时，若是全部商品都被选中，就让全选按钮为选中状态；html

用户能够点击 + - 增长或减小商品数量，也能够直接在文本框修改数量，数量修改后后边的小计也会相应改变；java

用户能够进行删除操做，删除单个商品、选中商品以及清理购物车；jquery

当用户进行操做时，下面的已选商品件数以及总额也会有相应变化web

准备工做：app

首先将css样式以及jq、js文件引入，jq文件要放在js文件上边ide

<link rel="stylesheet" href="css/car.css">
<script src="js/jquery.min.js"></script>
<script src="js/car.js"></script>

HTML代码及CSS样式：函数

 1 <body>
 2     <div class="w">
 3         <div class="cart-warp">
 4             <!-- 头部全选模块 -->
 5             <div class="cart-thead">
 6                 <div class="t-checkbox">
 7                     <input type="checkbox" name="" id="" class="checkall"> 全选  8                 </div>
 9                 <div class="t-goods">商品</div>
10                 <div class="t-price">单价</div>
11                 <div class="t-num">数量</div>
12                 <div class="t-sum">小计</div>
13                 <div class="t-action">操做</div>
14             </div>
15             <!-- 商品详细模块 -->
16             <div class="cart-item-list">
17                 <div class="cart-item check-cart-item">
18                     <div class="p-checkbox">
19                         <input type="checkbox" name="" id="" checked class="j-checkbox">
20                     </div>
21                     <div class="p-goods">
22                         <div class="p-img">
23                             <img src="img/p1.jpg" alt="">
24                         </div>
25                         <div class="p-msg">【5本26.8元】经典儿童文学彩图青少版八十天环游地球中学生语文教学大纲</div>
26                     </div>
27                     <div class="p-price">￥12.60</div>
28                     <div class="p-num">
29                         <div class="quantity-form">
30                             <a href="javascript:;" class="decrement">-</a>
31                             <input type="text" class="itxt" value="1">
32                             <a href="javascript:;" class="increment">+</a>
33                         </div>
34                     </div>
35                     <div class="p-sum">￥12.60</div>
36                     <div class="p-action"><a href="javascript:;">删除</a></div>
37                 </div>
38                 <div class="cart-item">
39                     <div class="p-checkbox">
40                         <input type="checkbox" name="" id="" class="j-checkbox">
41                     </div>
42                     <div class="p-goods">
43                         <div class="p-img">
44                             <img src="img/p2.jpg" alt="">
45                         </div>
46                         <div class="p-msg">【2000张贴纸】贴纸书 3-6岁 贴画儿童 贴画书全套12册 贴画 贴纸儿童 汽</div>
47                     </div>
48                     <div class="p-price">￥24.80</div>
49                     <div class="p-num">
50                         <div class="quantity-form">
51                             <a href="javascript:;" class="decrement">-</a>
52                             <input type="text" class="itxt" value="1">
53                             <a href="javascript:;" class="increment">+</a>
54                         </div>
55                     </div>
56                     <div class="p-sum">￥24.80</div>
57                     <div class="p-action"><a href="javascript:;">删除</a></div>
58                 </div>
59                 <div class="cart-item">
60                     <div class="p-checkbox">
61                         <input type="checkbox" name="" id="" class="j-checkbox">
62                     </div>
63                     <div class="p-goods">
64                         <div class="p-img">
65                             <img src="img/p3.jpg" alt="">
66                         </div>
67                         <div class="p-msg">唐诗三百首+成语故事全2册 一年级课外书 精装注音儿童版 小学生二三年级课外阅读书籍</div>
68                     </div>
69                     <div class="p-price">￥29.80</div>
70                     <div class="p-num">
71                         <div class="quantity-form">
72                             <a href="javascript:;" class="decrement">-</a>
73                             <input type="text" class="itxt" value="1">
74                             <a href="javascript:;" class="increment">+</a>
75                         </div>
76                     </div>
77                     <div class="p-sum">￥29.80</div>
78                     <div class="p-action"><a href="javascript:;">删除</a></div>
79                 </div>
80             </div>
81             <!-- 结算模块 -->
82             <div class="cart-floatbar">
83                 <div class="select-all">
84                     <input type="checkbox" name="" id="" class="checkall">全选 85                 </div>
86                 <div class="operation">
87                     <a href="javascript:;" class="remove-batch"> 删除选中的商品</a>
88                     <a href="javascript:;" class="clear-all">清理购物车</a>
89                 </div>
90                 <div class="toolbar-right">
91                     <div class="amount-sum">已经选<em>1</em>件商品</div>
92                     <div class="price-sum">总价： <em>￥12.60</em></div>
93                     <div class="btn-area">去结算</div>
94                 </div>
95             </div>  <!-- cart-floatbar end -->
96         </div>  <!-- cart-warp end -->
97     </div>  <!-- w end -->
98 </body>

car.html

 1 * {
 2  margin: 0;
 3  padding: 0  4 }
 5 em,  6 i {
 7  font-style: normal;
 8 }
 9 li {
 10  list-style: none;
 11 }
 12 a {
 13  color: #666;
 14  text-decoration: none;
 15 }
 16 a:hover {
 17  color: #e33333;
 18 }
 19 body {
 20  font: 12px/1.5 'Microsoft YaHei', 'Heiti SC', tahoma, arial, 'Hiragino Sans GB', \\5B8B\4F53, sans-serif;
 21  color: #666  22 }
 23 .w {
 24  width: 1200px;
 25  margin: 0 auto;
 26 }
 27 .cart-thead {
 28  height: 32px;
 29  line-height: 32px;
 30  margin: 5px 0 10px;
 31  padding: 5px 0;
 32  background: #f3f3f3;
 33  border: 1px solid #e9e9e9;
 34  border-top: 0;
 35  position: relative;
 36 }
 37 .cart-thead>div,  38 .cart-item>div {
 39  float: left;
 40 }
 41 .t-checkbox,  42 .p-checkbox {
 43  height: 18px;
 44  line-height: 18px;
 45  padding-top: 7px;
 46  width: 122px;
 47  padding-left: 11px;
 48 }
 49 .t-goods {
 50  width: 400px;
 51 }
 52 .t-price {
 53  width: 120px;
 54  padding-right: 40px;
 55  text-align: right;
 56 }
 57 .t-num {
 58  width: 150px;
 59  text-align: center;
 60 }
 61 .t-sum {
 62  width: 100px;
 63  text-align: right;
 64 }
 65 .t-action {
 66  width: 130px;
 67  text-align: right;
 68 }
 69 .cart-item {
 70  height: 160px;
 71  border-style: solid;
 72  border-width: 2px 1px 1px;
 73  border-color: #aaa #f1f1f1 #f1f1f1;
 74  background: #fff;
 75  padding-top: 14px;
 76  margin: 15px 0;
 77 }
 78 .check-cart-item {
 79  background: #fff4e8;
 80 }
 81 .p-checkbox {
 82  width: 50px;
 83 }
 84 .p-goods {
 85  margin-top: 8px;
 86  width: 565px;
 87 }
 88 .p-img {
 89  float: left;
 90  border: 1px solid #ccc;
 91  padding: 5px;
 92 }
 93 .p-msg {
 94  float: left;
 95  width: 210px;
 96  margin: 0 10px;
 97 }
 98 .p-price {
 99  width: 110px;
100 }
101 .quantity-form {
102  width: 80px;
103  height: 22px;
104 }
105 .p-num {
106  width: 170px;
107 }
108 .decrement, 109 .increment {
110  float: left;
111  border: 1px solid #cacbcb;
112  height: 18px;
113  line-height: 18px;
114  padding: 1px 0;
115  width: 16px;
116  text-align: center;
117  color: #666;
118  background: #fff;
119  margin-left: -1px;
120 }
121 .itxt {
122  float: left;
123  border: 1px solid #cacbcb;
124  width: 42px;
125  height: 18px;
126  line-height: 18px;
127  text-align: center;
128  padding: 1px;
129  margin-left: -1px;
130  font-size: 12px;
131  font-family: verdana;
132  color: #333;
133  -webkit-appearance: none;
134 }
135 .p-sum {
136  font-weight: 700;
137  width: 145px;
138 }
139 .cart-floatbar {
140  height: 50px;
141  border: 1px solid #f0f0f0;
142  background: #fff;
143  position: relative;
144  margin-bottom: 50px;
145  line-height: 50px;
146 }
147 .select-all {
148  float: left;
149  height: 18px;
150  line-height: 18px;
151  padding: 16px 0 16px 9px;
152  white-space: nowrap;
153 }
154 .select-all input {
155  vertical-align: middle;
156  display: inline-block;
157  margin-right: 5px;
158 }
159 .operation {
160  float: left;
161  width: 200px;
162  margin-left: 40px;
163 }
164 .clear-all {
165  font-weight: 700;
166  margin: 0 20px;
167 }
168 .toolbar-right {
169  float: right;
170 }
171 .amount-sum {
172  float: left;
173 }
174 .amount-sum em {
175  font-weight: 700;
176  color: #E2231A;
177  padding: 0 3px;
178 }
179 .price-sum {
180  float: left;
181  margin: 0 15px;
182 }
183 .price-sum em {
184  font-size: 16px;
185  color: #E2231A;
186  font-weight: 700;
187 }
188 .btn-area {
189  font-weight: 700;
190  width: 94px;
191  height: 52px;
192  line-height: 52px;
193  color: #fff;
194  text-align: center;
195  font-size: 18px;
196  font-family: "Microsoft YaHei";
197  background: #e54346;
198  overflow: hidden;
199 }

car.css

具体功能实现：this

1. 当全选按钮改变时，让小复选框按钮和全选按钮保持一致。

全选按钮被选中时，让全部商品背景色改变，反之则去掉背景色，同时也要改变已选商品件数和总额

 1 $(".checkall").change(function() {  2     // 当全选按钮改变时，让小复选框按钮和全选按钮保持一致（隐式迭代，不须要循环遍历）
 3     $(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"));  4     getSum();   // 计算总额函数
 5     // 添加背景
 6     // 判断是不是选中状态，是的话添加check-cart-item类，没有就移除
 7     if($(this).prop("checked")) {  8         $(".cart-item").addClass("check-cart-item");  9     } else { 10         $(".cart-item").removeClass("check-cart-item"); 11  } 12 })

2. 当小复选框按钮改变时，判断是否全部的小按钮都是选中状态，是的话让全选按钮为选中状态，不然为未选中状态。

经过已选复选框的个数是否等于全部小复选框的总个数来判断，同时也要改变背景色和总额模块

 1 $(".j-checkbox").change(function() {  2     if($(".j-checkbox:checked").length === $(".j-checkbox").length) {  3         $(".checkall").prop("checked", true);  4     } else {  5         $(".checkall").prop("checked", false);  6  }  7  getSum();  8     // 当小复选框为选中状态时，改变背景颜色（添加check-cart-item类）
 9     if($(this).prop("checked")) { 10         $(this).parents(".cart-item").addClass("check-cart-item"); 11     } else { 12         $(this).parents(".cart-item").removeClass("check-cart-item"); 13  } 14 })

3. 用户能够经过点击加减号或者直接修改文本框来修改商品数量，后边的小计也作相应的变化

①点击+按钮，文本框数字加一，小计加价。

先把原来的数量获取过来，而后在原来的基础上加一再赋给文本框；把单价获取过来，乘以文本框数量就是小计

 1 $(".increment").click(function() {  2     var n = $(this).siblings(".itxt").val();  3     n++;  4     $(this).siblings(".itxt").val(n);  5     // 小计模块
 6     // num为获取过来的单价，用substr()截取字符串把前边的￥去掉
 7     var num = $(this).parents(".p-num").siblings(".p-price").html().substr(1);  8     // toFixed(2)保留两位小数
 9     var price = (num * n).toFixed(2); 10     $(this).parents(".p-num").siblings(".p-sum").html("￥" + price); 11  getSum(); 12 })

②点击-按钮，文本框数字减一，小计减价。

具体方法同上，有一点不同是商品数量不能小于1，要判断一下

 1 $(".decrement").click(function() {  2     var n = $(this).siblings(".itxt").val();  3     n <= 1 ? n : n--;  4     $(this).siblings(".itxt").val(n);  5     // 小计模块
 6     var num = $(this).parents(".p-num").siblings(".p-price").html().substr(1);  7     // toFixed(2)保留两位小数
 8     var price = (num * n).toFixed(2);  9     $(this).parents(".p-num").siblings(".p-sum").html("￥" + price); 10  getSum(); 11 })

③直接修改文本框改变数量

1 $(".itxt").change(function() { 2     var n = $(this).val(); 3     var num = $(this).parents(".p-num").siblings(".p-price").html().substr(1); 4     // toFixed(2)保留两位小数
5     var price = (num * n).toFixed(2); 6     $(this).parents(".p-num").siblings(".p-sum").html("￥" + price); 7  getSum(); 8 })

4. 计算已选商品数及总额。封装成一个函数，页面加载完时应先调用一下，更新数据

声明变量来存储已选商品数以及总额，用each()遍历已选商品。

 1 function getSum() {  2     var count = 0;  3     var money = 0;  4     // 只遍历选中的商品 each遍历，i为索引，ele为对象
 5     $(".j-checkbox:checked").parents(".cart-item").find(".itxt").each(function(i, ele) {  6         count += parseInt($(ele).val());   // 会有小偏差，要取整一下
 7  })  8     $(".amount-sum em").text(count);  9     $(".j-checkbox:checked").parents(".cart-item").find(".p-sum").each(function(i, ele) { 10         money += parseFloat($(ele).text().substr(1)); 11  }) 12     $(".price-sum em").text("￥" + money.toFixed(2)); 13 }

5. 删除模块

 1 // 删除单个商品
 2 $(".p-action a").click(function() {  3     $(this).parents(".cart-item").remove();  4  getSum();  5 })  6 // 删除选中商品
 7 $(".remove-batch").click(function() {  8     $(".j-checkbox:checked").parents(".cart-item").remove();  9  getSum(); 10 }) 11 // 清理购物车
12 $(".clear-all").click(function() { 13     $(".cart-item").remove(); 14  getSum(); 15 })

完整JS代码：

 1 $(function() {  2     $(".checkall").change(function() {  3         // 当全选按钮改变时，让小复选框按钮和全选按钮保持一致（隐式迭代，不须要循环遍历）
 4         $(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"));  5         getSum();   // 计算总额函数
 6         // 添加背景
 7         // 判断是不是选中状态，是的话添加check-cart-item类，没有就移除
 8         if($(this).prop("checked")) {  9             $(".cart-item").addClass("check-cart-item"); 10         } else { 11             $(".cart-item").removeClass("check-cart-item"); 12  } 13  }) 14     $(".j-checkbox").change(function() { 15         if($(".j-checkbox:checked").length === $(".j-checkbox").length) { 16             $(".checkall").prop("checked", true); 17         } else { 18             $(".checkall").prop("checked", false); 19  } 20  getSum(); 21         // 当小复选框为选中状态时，改变背景颜色（添加check-cart-item类）
22         if($(this).prop("checked")) { 23             $(this).parents(".cart-item").addClass("check-cart-item"); 24         } else { 25             $(this).parents(".cart-item").removeClass("check-cart-item"); 26  } 27  }) 28 
29     // 点击+按钮，文本框数字加一
30     $(".increment").click(function() { 31         var n = $(this).siblings(".itxt").val(); 32         n++; 33         $(this).siblings(".itxt").val(n); 34         // 小计模块
35         // num为获取过来的单价，用substr()截取字符串把前边的￥去掉
36         var num = $(this).parents(".p-num").siblings(".p-price").html().substr(1); 37         // toFixed(2)保留两位小数
38         var price = (num * n).toFixed(2); 39         $(this).parents(".p-num").siblings(".p-sum").html("￥" + price); 40  getSum(); 41  }) 42     // 点击-按钮，文本框数字减一
43     $(".decrement").click(function() { 44         var n = $(this).siblings(".itxt").val(); 45         n <= 1 ? n : n--; 46         $(this).siblings(".itxt").val(n); 47         // 小计模块
48         var num = $(this).parents(".p-num").siblings(".p-price").html().substr(1); 49         // toFixed(2)保留两位小数
50         var price = (num * n).toFixed(2); 51         $(this).parents(".p-num").siblings(".p-sum").html("￥" + price); 52  getSum(); 53  }) 54     // 当用户直接修改文本框时
55     $(".itxt").change(function() { 56         var n = $(this).val(); 57         var num = $(this).parents(".p-num").siblings(".p-price").html().substr(1); 58         // toFixed(2)保留两位小数
59         var price = (num * n).toFixed(2); 60         $(this).parents(".p-num").siblings(".p-sum").html("￥" + price); 61  getSum(); 62  }) 63 
64     // 计算总额函数
65  getSum(); 66     function getSum() { 67         var count = 0; 68         var money = 0; 69         // 只遍历选中的商品 each遍历，i为索引，ele为对象
70         $(".j-checkbox:checked").parents(".cart-item").find(".itxt").each(function(i, ele) { 71             count += parseInt($(ele).val());   // 会有小偏差，要取整一下
72  }) 73         $(".amount-sum em").text(count); 74         $(".j-checkbox:checked").parents(".cart-item").find(".p-sum").each(function(i, ele) { 75             money += parseFloat($(ele).text().substr(1)); 76  }) 77         $(".price-sum em").text("￥" + money.toFixed(2)); 78  } 79 
80     // 删除商品模块
81     // 删除单个商品
82     $(".p-action a").click(function() { 83         $(this).parents(".cart-item").remove(); 84  getSum(); 85  }) 86     // 删除选中商品
87     $(".remove-batch").click(function() { 88         $(".j-checkbox:checked").parents(".cart-item").remove(); 89  getSum(); 90  }) 91     // 清理购物车
92     $(".clear-all").click(function() { 93         $(".cart-item").remove(); 94  getSum(); 95  }) 96 })