基於 h5+jquery 購物車功能實踐

最近一直忙於公司的一個新的h5項目，項目中有一個購物車模塊，使用jquery實現購物車基本結算功能。現已整理出來，感興趣的小夥伴們可以參考一下。

基本實現了單選、全選、購物車數量聯動、價格動態匯總、刪除訂單及無數據提示。

購物車列表模板

實際項目中需要根據購物車商品數據動態渲染，這裡就使用靜態html展示了。

<!-- 購物車列表 --><div class=&34; id=&34;> <div class=&34;> <!-- //複選框 --> <div class=&34;><i class=&34;></i></div> <!-- //商品信息 --> <div class=&34;> <img class=&34; src=&34; /> <div class=&34;> <div class=&34;> <div class=&34;>海陵島大角灣風景區2天1晚</div> <div class=&34;>給你不一樣的風景體驗</div> </div> <div class=&34;>￥<em>199.00</em></div> </div> </div> <!-- //數量加減 --> <div class=&34;> <span class=&34; onClick=&34;>-</span> <input type=&34; value=&34; onBlur=&34; /> <span class=&34; onClick=&34;>+</span> </div> <!-- //刪除 --> <img class=&34; src=&34; /> </div> <!-- ... --></div>

購物車底部固定模板

<!-- 購物車底部 --><div class=&34; style=&34;> <div class=&34;> <div class=&34;> <div class=&34; id=&34;> <i class=&34;></i> <span>全選</span> </div> <div class=&34;>合計：<span class=&34;>￥<em id=&34;>12232.00</em></span></div> <button class=&34; id=&34;>結算 (<em id=&34;>12</em>)</button> </div> </div></div>

購物車數量

直接封裝成$.cartNum函數，通過 $.cartNum.set() 、 $.cartNum.check(this) 調用即可。

<div class=&34;> <span class=&34; onClick=&34;>-</span> <input type=&34; value=&34; onBlur=&34; /> <span class=&34; onClick=&34;>+</span></div>

$(function(){ // 購物車數量 $.cartNum = { set: function(code, obj){ var ipt = $(obj).siblings(&34;); var cartNums = parseInt($.trim(ipt.val())); switch (code) { case 1: { cartNums++; } break; case -1: { cartNums--; } break; } ipt.val(cartNums); $.cartNum.check(ipt); getTotalPrice(); }, check: function(obj){ var o = $(obj); //數量小於0 var cartNums = parseInt($.trim(o.val())); if (cartNums <= 1) { o.val(1); o.siblings(&39;).addClass(&39;); }else { o.siblings(&39;).removeClass(&39;); } //判斷數量是否是數字 var regExp = /^[1-9]*[1-9][0-9]*$/; if (isNaN(cartNums) || !regExp.test($.trim(o.val()))) { o.val(1); o.siblings(&39;).addClass(&39;); } //數量大於庫存（假定庫存99） //var storeNums = parseInt($.trim($(&data_storeNums&39;39;); var num = $radio.size(); var k = 0; $radio.each(function(i, v) { if($(this).hasClass(&39;)) { k++; } }); if(k == num) { $(&J__chkAll&39;on&39;39;).removeClass(&39;); }}// 綁定單選$(&39;).on(&39;, &J__CartLS .cart-item__radio&39;on&39;body&39;click&39;39;, function() { if($(this).hasClass(&39;)) { $(&J__CartLS .cart-item__radio&39;on&39;39;).addClass(&39;); } $(this).toggleClass(&39;); getTotalPrice();});

價格匯總

點擊單選、全選及數量加減，都觸發 getTotalPrice 函數。

// 價格匯總getTotalPrice();function getTotalPrice() { var $cartls = $(&J__CartLS&39;.cart-ls__item&39;.cart-item__num input&39;.cart-item__num .minus&39;disabled&39;.cart-item__radio&39;on&39;.cart-item__num input&39;.g-price em&39;39;).prop(&39;, selected < 1 ? true : false); $(&J__totalPrice&39;39;).text(selected);}

刪除訂單

刪除訂單後，移除該訂單，觸發 getTotalPrice 函數，當購物車為空，則提示無數據。

// 刪除訂單$(&J__CartLS&39;click&39;.cart-item__del&39;ios&39;border-radius:12px;font-family:arial;overflow:hidden;&39;您確定要刪除該條訂單嗎？&39;取消&39;color:39;, onTap() { wcPop.close(); } }, { text: &39;, style: &e0201f&39;.cart-ls__item&39;39;).size() > 0) { $(&39;).text($(&J__CartLS .cart-ls__item&39;.J__bmBadge&39;.cart-nodata').fadeIn(); } } } ] })});

ok，以上就是基於jquery實現的購物車功能。希望對大家有所幫助，感興趣的可以參考一下。

如果大家有更優的方法，歡迎一起交流討論哈~~