jQuery購(gòu)物車?yán)奂邮且环N很實(shí)用的功能，在網(wǎng)頁(yè)設(shè)計(jì)中經(jīng)常被使用。當(dāng)用戶購(gòu)買商品時(shí)，將商品添加到購(gòu)物車中，并在購(gòu)物車中顯示商品的數(shù)量和總價(jià)。
以下是一個(gè)簡(jiǎn)單的jQuery購(gòu)物車?yán)奂哟a：
<html>
<head>
<script src="https://cdn.jsdelivr.net/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
var total = 0;
$(".add-to-cart").click(function(){
var price = parseFloat($(this).attr("data-price"));
var qty = parseInt($(this).attr("data-qty"));
total += price;
$("#total").text(total.toFixed(2));
var cartQty = parseInt($("span#cart-qty").text());
$("span#cart-qty").text(cartQty + qty);
});
});
</script>
</head>
<body>
<h1>購(gòu)物車</h1>
<p><span id="cart-qty">0</span>件商品</p>
<button class="add-to-cart" data-price="12.99" data-qty="1">添加商品</button>
<p>總價(jià)：<span id="total">0.00</span>元</p>
</body>
</html>以上代碼中，我們先將總價(jià)設(shè)置為0，在添加商品按鈕被點(diǎn)擊時(shí)，獲取該商品的價(jià)格和數(shù)量。將總價(jià)加上該商品的價(jià)格，并顯示出來(lái)。還要將購(gòu)物車中的數(shù)量加上該商品的數(shù)量，最后顯示出來(lái)。
通過(guò)使用這個(gè)簡(jiǎn)單的jQuery購(gòu)物車?yán)奂哟a，我們可以方便地實(shí)現(xiàn)網(wǎng)頁(yè)購(gòu)物車的功能，給用戶帶來(lái)更好的購(gòu)物體驗(yàn)。