JQuery是一個高效的JavaScript庫,它可以幫助我們快速地在網(wǎng)頁上添加交互效果和動態(tài)效果。比如,當(dāng)我們購物時,通常需要一個購物車功能來統(tǒng)計選購商品的總價,這時我們可以通過JQuery來實現(xiàn)。
//定義變量 var totalPrice = 0; //點擊加入購物車按鈕 $("#addCartBtn").click(function(){ //獲取商品單價 var price = parseFloat($("#price").text().substr(1)); //獲取購買數(shù)量 var quantity = parseInt($("#quantity").val()); //計算商品總價 var subtotal = price * quantity; //將商品總價添加到購物車中 $("#cartList").append("<li>" + $("#productName").text() + "<span class='quantity'>" + quantity + "件</span>" +"<span class='price'>" + "¥" + subtotal.toFixed(2) + "</span>" + "</li>"); //累加商品總價 totalPrice += subtotal; //刷新購物車總計 $("#totalPrice").text("¥" + totalPrice.toFixed(2)); });
在上面的代碼中,我們定義了一個變量totalPrice來存儲購物車中所有商品的總價。當(dāng)點擊加入購物車按鈕時,我們通過JQuery獲取商品的單價和購買數(shù)量,然后計算出商品的總價,并將其添加到購物車中。同時我們還累加商品總價,并刷新頁面中的購物車總計。
通過這樣的方式,我們可以方便地實現(xiàn)網(wǎng)頁上的購物車功能,讓用戶更加方便地瀏覽商品和結(jié)算購物。