在網頁設計中,購物車結算是一個比較常見的功能之一。利用jQuery可以很方便地實現購物車結算的功能。下面是一個簡單的jQuery購物車結算代碼示例:
$('button.checkout').click(function(){
// 獲取購物車中的所有商品
var items = $('.item');
// 初始化總價為0
var totalPrice = 0;
// 遍歷所有商品,累加總價
items.each(function(){
var price = parseFloat($(this).find('.price').text().replace('$', ''));
var quantity = parseInt($(this).find('.quantity input').val());
totalPrice += price * quantity;
});
// 將總價顯示在頁面中
$('span.total-price').text('$' + totalPrice.toFixed(2));
// 清空購物車中的所有商品
items.remove();
});
在這段代碼中,我們首先通過$('button.checkout')
選擇器選中了頁面中所有class為checkout
的按鈕,當用戶點擊這些按鈕時就會觸發購物車結算函數。接著,我們用$('.item')
選擇器選中了購物車中所有的商品,并用items.each()
方法遍歷了每個商品,從而計算出了所有商品的總價,并將總價顯示在頁面中。
最后,我們用items.remove()
方法清空了購物車中的所有商品。
上一篇css怎么控制html的
下一篇jquery跨域訪問原理