欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

jquery購物車制作

劉海燕1年前7瀏覽0評論

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和名稱,方便后續從購物車中查找商品。計算總價時,通過遍歷購物車中每一項,計算出該項商品數量和價格的乘積,累加得到總價。

當然,還可以進行更多的功能擴展,如刪除商品、選擇規格等,以及美化購物車頁面樣式,提升用戶體驗。