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

jquery購物車商品增加

吳曉飛1年前8瀏覽0評論

隨著網絡購物的興起,購物車已經成為了一個家喻戶曉的功能。在jQuery中實現購物車中商品的增加也是非常簡單的。

$(document).ready(function(){
// 選擇商品并點擊加入購物車按鈕時觸發的事件
$('.add-to-cart').click(function(){
// 獲取商品名稱和價格
var itemName = $(this).siblings('.item-name').text();
var itemPrice = parseFloat($(this).siblings('.item-price').text());
// 判斷購物車中是否已經有了這個商品
var foundItem = false;
$('.cart-item').each(function(){
if ($(this).find('.cart-item-name').text() === itemName) {
// 如果已經有了這個商品,則增加其數量和總價
foundItem = true;
var itemQty = parseInt($(this).find('.cart-item-qty').text());
var itemTotal = parseFloat($(this).find('.cart-item-total').text());
itemQty++;
itemTotal += itemPrice;
$(this).find('.cart-item-qty').text(itemQty);
$(this).find('.cart-item-total').text(itemTotal.toFixed(2));
}
});
// 如果購物車中沒有這個商品,則新建一個購物車條目
if (!foundItem) {
var newCartItem = '<div class="cart-item"><span class="cart-item-name">' + itemName + '</span><span class="cart-item-qty">1</span><span class="cart-item-price">' + itemPrice.toFixed(2) + '</span><span class="cart-item-total">' + itemPrice.toFixed(2) + '</span></div>';
$('.cart-items').append(newCartItem);
}
// 更新購物車總價
var cartTotal = 0;
$('.cart-item-total').each(function(){
cartTotal += parseFloat($(this).text());
});
$('.cart-total').text(cartTotal.toFixed(2));
});
});

以上代碼中,我們首先綁定了一個“加入購物車”按鈕的點擊事件,當用戶點擊按鈕時,我們就可以通過jQuery獲取到商品名稱和價格。然后我們遍歷購物車中的所有條目,看看是否已經有了這個商品。如果有了,那么我們就只需要把該商品的數量和總價增加即可;如果沒有,那么就新建一個購物車條目,并且把商品信息添加到其中。

無論是增加數量還是新建條目,最后都需要更新購物車的總價。我們可以使用一個類名為“.cart-total”的 span 元素來顯示總價,每次更新時都遍歷購物車里的所有條目,把它們的總價累加起來,最后更新總價 DOM 元素的文本內容即可。