一個簡單的購物車jQuery
阿新 • • 發佈：2020-08-27
就只做了一個介面，帶著一點小功能
先放個目錄
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <link rel="stylesheet" type="text/css" href="css/cart.css" /> 8 <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> 9 <script type="text/javascript"> 10 $(function() { 11 /*全選按鈕功能*/ 12 // console.log($("#t-checkbox")); 13 /* $(".t-checkbox input[name=t-checkbox]").click(function(){14 $(".p-checkbox input[name=p-checkbox]").prop("checked",$(this).prop("checked")) 15 });*/ 16 17 /* 18 *id選擇器只返回文件中的第一個id為改值的元素，所以使用id選擇器時，只有第一個有效 19 */ 20 /* $("#t-checkbox").click(function(){21 $("#p-checkbox").prop("checked",$(this).prop("checked")) 22 }); 23 */ 24 $("#t-checkbox").click(function() { 25 $(".p-checkbox input[name=p-checkbox]").prop("checked", $(this).prop("checked")) 26 countSum(); 27 }) 28 29 /*單個按鈕影響全選*/ 30 $(".p-checkbox input[name=p-checkbox]").click(function(){ 31 // var chk=true; 32 // $(".p-checkbox input[name=p-checkbox]").each(function(){ 33 // /*如果遍歷到的元素未被選中*/ 34 // if(!$(this).prop("checked")){ 35 // chk=false; 36 // } 37 // }) 38 // $("#t-checkbox").prop("checked",chk); 39 /*上面的改進*/ 40 // console.log($("input[name='p-checkbox']:not(:checked)")); 41 $("#t-checkbox").prop("checked",!($("input[name='p-checkbox']:not(:checked)").length>0)); 42 countSum(); 43 }) 44 45 /* 46 * 按鈕數量加1，改變小計價格數 47 * $(this).prev().val()取出來的是一個字串型別的資料，需要進行資料轉化再加1，否則會執行字串的拼接 48 */ 49 /* console.log( 50 $(".p-quantity input:eq(2)")//此選擇器只會選擇1個 51 );*/ 52 // console.log($(".p-quantity input[value='+']")); 53 $(".p-quantity input[value='+']").click(function(){ 54 /*數量加1*/ 55 var quantity=parseInt($(this).prev().val())+1; 56 /*再設定文字框內容*/ 57 $(this).prev().val(quantity); 58 59 /*改變小計*/ 60 $(this).parent().next().text( 61 $(this).parent().prev().text()*quantity 62 ) 63 countSum(); 64 }) 65 66 /* 67 * 按鈕數量減1 68 */ 69 $(".p-quantity input[value='-']").click(function(){ 70 /*數量減1*/ 71 var quantity=parseInt($(this).next().val())-1; 72 if(quantity==0){ 73 return; 74 } 75 76 /*再設定文字框內容*/ 77 $(this).next().val(quantity); 78 79 /*改變小計*/ 80 $(this).parent().next().text( 81 $(this).parent().prev().text()*quantity 82 ) 83 countSum(); 84 }) 85 86 /*計算總價*/ 87 // console.log($("input[name=p-checkbox]").parents(".item-form").children("")); 88 // console.log($("input[type=checkbox]")); 89 function countSum(){ 90 var sum=0; 91 /*遍歷單個商品複選框*/ 92 // $("input[name='p-checkbox']").each(function(){ 93 // if($(this).prop("checked")){ 94 // sum+=parseFloat($(this).parents(".item-form").children(".p-sum").text()); 95 // } 96 // }) 97 /*上面的改進*/ 98 99 $("input[name='p-checkbox']:checked").each(function(){ 100 sum+=parseFloat($(this).parents(".item-form").children(".p-sum").text()); 101 }) 102 103 $(".price-sum span").text(sum); 104 } 105 countSum(); 106 107 /*單個刪除*/ 108 $(".p-action").click(function(){ 109 if(confirm("確認要刪除該商品嗎")){ 110 /*下面也可，因為父元素直接是要刪除的div*/ 111 // $(this).parent().remove(); 112 $(this).parents(".item-form").remove(); 113 countSum(); 114 isEmpty(); 115 } 116 }) 117 118 /*選擇刪除*/ 119 $(".del-selected").click(function(){ 120 if(confirm("確認刪除所選商品?")){ 121 //方法已改進 122 $(".p-checkbox :checked").parents(".item-form").remove(); 123 countSum(); 124 isEmpty(); 125 } 126 }) 127 128 /*判斷購物車中是否有商品,沒有商品顯示預設資訊*/ 129 function isEmpty(){ 130 if($(".item-form").length==0){ 131 $(".no-item").css("display","block"); 132 return true; 133 } 134 return false; 135 } 136 isEmpty(); 137 }) 138 </script> 139 </head> 140 141 <body> 142 <div class="cart"> 143 <form action="" method="post"> 144 <div class="cart-thead"> 145 <div class="column t-checkbox"> 146 <input type="checkbox" name="t-checkbox" id="t-checkbox" checked="checked" /> 全選 147 </div> 148 <div class="column t-img"> 149 圖片 150 </div> 151 <div class="column t-goods"> 152 商品 153 </div> 154 <div class="column t-price"> 155 單價 156 </div> 157 <div class="column t-quantity"> 158 數量 159 </div> 160 <div class="column t-sum"> 161 小計 162 </div> 163 <div class="column t-action"> 164 操作 165 </div> 166 </div> 167 168 <div class="item-form"> 169 <div class="cell p-checkbox"> 170 <input type="checkbox" name="p-checkbox" id="p-checkbox" checked="checked" /> 171 </div> 172 <div class="cell p-img"> 173 <img src="img/lb1.jpg" /> 174 </div> 175 <div class="cell p-goods"> 176 商品A 177 </div> 178 <div class="cell p-price"> 179 62 180 </div> 181 <div class="cell p-quantity"> 182 <input type="button" id="" value="-" /> 183 <input type="text" id="" value="1" /> 184 <input type="button" id="" value="+" /> 185 </div> 186 <div class="cell p-sum"> 187 62 188 </div> 189 <div class="cell p-action"> 190 <!--<a href="javascript:">刪除</a>--> 191 刪除 192 </div> 193 </div> 194 <div class="item-form"> 195 <div class="cell p-checkbox"> 196 <input type="checkbox" name="p-checkbox" id="p-checkbox" checked="checked" /> 197 </div> 198 <div class="cell p-img"> 199 <img src="img/lb1.jpg" /> 200 </div> 201 <div class="cell p-goods"> 202 商品B 203 </div> 204 <div class="cell p-price"> 205 72 206 </div> 207 <div class="cell p-quantity"> 208 <input type="button" id="" value="-" /> 209 <input type="text" id="" value="1" /> 210 <input type="button" id="" value="+" /> 211 </div> 212 <div class="cell p-sum"> 213 72 214 </div> 215 <div class="cell p-action"> 216 <!--<a href="javascript:">刪除</a>--> 217 刪除 218 </div> 219 </div> 220 <div class="item-form"> 221 <div class="cell p-checkbox"> 222 <input type="checkbox" name="p-checkbox" id="p-checkbox" checked="checked" /> 223 </div> 224 <div class="cell p-img"> 225 <img src="img/lb1.jpg" /> 226 </div> 227 <div class="cell p-goods"> 228 商品C 229 </div> 230 <div class="cell p-price"> 231 82 232 </div> 233 <div class="cell p-quantity"> 234 <input type="button" id="" value="-" /> 235 <input type="text" id="" value="1" /> 236 <input type="button" id="" value="+" /> 237 </div> 238 <div class="cell p-sum"> 239 82 240 </div> 241 <div class="cell p-action"> 242 <!--<a href="javascript:">刪除</a>--> 243 刪除 244 </div> 245 </div> 246 247 <div class="no-item"> 248 購物車已空空如也，快去購物吧 249 </div> 250 <hr /> 251 <div class="cart-floatbar"> 252 <div class="del-selected"> 253 <!--<a href="javascript:">刪除所選</a>--> 254 刪除所選 255 </div> 256 <div class="price-sum"> 257 總價：<span>0</span>元 258 <input type="submit" value="去結算" /> 259 <!--<input type="image" src="//misc.360buyimg.com/user/cart/css/i/cart-submit-btn-2019.png" >/>--> 260 </div> 261 </div> 262 </form> 263 </div> 264 </body> 265 266 </html>
/*購物div*/ .cart{ width: 1026px; margin: 0px auto; } /*購物表格標題欄*/ .cart-thead{ background-color: #f3f3f3; border: 1px solid #e9e9e9; } .column{ display: inline-block; /*float: left;*/ height: 30px; line-height: 30px; } .t-checkbox{ width: 80px; } .t-img{ width: 150px; } .t-goods{ width: 300px; } .t-price{ width: 100px; } .t-quantity{ width: 200px; } .t-sum{ width: 100px; } .t-action{ width: 65px; } /*購物表格標題欄結束*/ /*購物清單*/ .item-form{ margin: 10px 0px; } .cell{ display: inline-block; /*float: left;*/ height: 100px; line-height: 100px; } .p-checkbox{ width: 80px; text-align: center; } .p-img{ width: 150px; } .p-img img{ width: 150px; height: 90px; } .p-goods{ width: 300px; } .p-price{ width: 100px; } .p-quantity{ width: 200px; } .p-quantity input[type=text]{ width: 20px; } .p-sum{ width: 100px; } .p-action{ width: 65px; cursor: pointer; } .no-item{ display: none; text-align: center; color: brown; font-size: 20px; height: 120px; line-height: 120px; } /*購物清單結束*/ /*購物表格結算*/ .cart-floatbar{ height: 30px; /*background-color: #666666;*/ line-height: 30px; } .cart-floatbar div{ display: inline-block; /*text-align: right;*/ /*float: right;*/ } .del-selected{ text-align: center; cursor: pointer; } .price-sum{ float: right; } /*購物表格結算結束*/