jQuery實現簡單購物車頁面

時間 2019-12-09

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。