jQuery实现简单购物车页面

功能描述：

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

当用户选中商品时，如果所有商品都被选中，就让全选按钮为选中状态；

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

用户可以进行删除操作，删除单个商品、选中商品以及清理购物车；

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

准备工作：

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

<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

具体功能实现：

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 })

具体代码点击→https://github.com/sunyan1998/Some-demos （觉得不错右上角顺手点个☆star哦~感谢O(∩_∩)O~）

里面有很多CSS3/JS/jQuery小例子哦，包括各种轮播图、电梯导航、封装的动画函数、todolist、登录模态框（可拖动）、购物车、点击换肤、密码显示隐藏、各种布局（bootstrap-flex-rem）等等......

posted @ 2019-12-04 08:34 又是没BUG的一天阅读(4852) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

又是没BUG的一天

jQuery实现简单购物车页面

公告