最近在學習前端開發,發現購物車是一個很常見且重要的功能。在實現購物車的過程中,我使用了jQuery的庫來幫助我完成。下面是我實現購物車的代碼分享:
$(document).ready(function() { // 獲取加入購物車按鈕 $('.add-to-cart-btn').click(function() { // 獲取商品信息 var product_id = $(this).data('id'); var product_name = $(this).data('name'); var product_price = $(this).data('price'); // 加入購物車 var cart_item = $('<tr><td>' + product_name + '</td><td>' + product_price + '</td></tr>'); $('#cart-items').append(cart_item); // 更新購物車總價 var cart_total = parseFloat($('#cart-total').text()); cart_total += parseFloat(product_price); $('#cart-total').text(cart_total.toFixed(2)); }); });
以上代碼實現了以下功能:
1. 點擊添加購物車按鈕,獲取商品信息;
2. 將商品信息添加到購物車中,包括商品名稱和價格;
3. 更新購物車總價,包括原先購物車中的商品和新增加的商品。
通過上述代碼實現,我們就可以方便地使用jQuery實現購物車的功能。如果您有更好的實現方式,歡迎在評論區分享。
上一篇css怎么弄邊框
下一篇css怎么把導航平行