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>
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 }
具體功能實現：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 })
相關文章
- 1. jQuery實現簡單購物車頁面
- 2. vuex實現購物車頁面
- 3. AngularJS 實現簡單購物車
- 4. vue實現簡單購物車
- 5. 購物車的簡單實現
- 6. 使用Python實現簡單購物車
- 7. angularjs簡單實現購物車需求
- 8. JavaScript實現簡單購物車效果
- 9. JavaScript實現簡單的購物車
- 10. uniapp項目簡單實現購物車
- 更多相關文章...
- • jQuery Mobile 頁面 - jQuery Mobile 教程
- • jQuery Mobile 頁面事件 - jQuery Mobile 教程
- • TiDB 在摩拜單車在線數據業務的應用和實踐
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. jQuery實現簡單購物車頁面
- 2. vuex實現購物車頁面
- 3. AngularJS 實現簡單購物車
- 4. vue實現簡單購物車
- 5. 購物車的簡單實現
- 6. 使用Python實現簡單購物車
- 7. angularjs簡單實現購物車需求
- 8. JavaScript實現簡單購物車效果
- 9. JavaScript實現簡單的購物車
- 10. uniapp項目簡單實現購物車