jQuery購物車是web開發中常見的一種實現方式,通過使用JavaScript框架jQuery,能夠快速高效地構建購物車功能,為電商網站的開發提供了方便。
實現一個基礎的jQuery購物車,主要需要以下幾個步驟:
$(document).ready(function(){ //1. 給加入購物車按鈕綁定事件 $('.add-to-cart').click(function(){ //2. 獲取商品id和名稱 var productId = $(this).data('id'); var productName = $(this).data('name'); //3. 判斷該商品是否已經在購物車中,如已存在,則數量+1,否則添加新項 var cartItem = $('.cart-item[data-id='+productId+']'); if(cartItem.length){ var qtyInput = cartItem.find('.qty'); var qty = parseInt(qtyInput.val()) + 1; qtyInput.val(qty); }else{ var cartItemHtml = '<tr class="cart-item" data-id="'+productId+'">'+ '<td>'+productName+'</td>'+ '<td><input type="number" class="qty" value="1"></td>'+ '</tr>'; $('#cart-items').append(cartItemHtml); } //4. 計算并更新購物車總價 updateCartTotal(); }); //5. 給購物車數量輸入框綁定事件 $('#cart-items').on('change', '.qty', function(){ //6. 計算并更新購物車總價 updateCartTotal(); }); //7. 更新購物車總價的函數 function updateCartTotal(){ var total = 0; $('.cart-item').each(function(){ var qty = parseInt($(this).find('.qty').val()); var price = parseFloat($(this).find('.price').text()); total += qty * price; }); $('#cart-total').text(total.toFixed(2)); } });
以上代碼實現了購物車的基本功能,包括添加商品、更新商品數量和計算總價。其中,通過jQuery的選擇器選擇元素,并通過數據屬性存儲商品id和名稱,方便后續從購物車中查找商品。計算總價時,通過遍歷購物車中每一項,計算出該項商品數量和價格的乘積,累加得到總價。
當然,還可以進行更多的功能擴展,如刪除商品、選擇規格等,以及美化購物車頁面樣式,提升用戶體驗。
上一篇jquery跨域傳文件
下一篇jquery購物車源碼