隨著網絡購物的興起,購物車已經成為了一個家喻戶曉的功能。在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 元素的文本內容即可。
上一篇css怎么打開書畫面
下一篇css怎么導入字體樣式