jquery作為JavaScript的一種庫,可以幫助我們更快速地開發網頁。其中包括制作購物車加減商品的功能。在這篇文章中,我們將會講解如何使用jQuery制作購物車的加減功能。
//HTML部分 <div id="cart"> <div class="cart-item"> <h3>商品1</h3> <button class="minus">-</button> <span class="quantity">1</span> <button class="plus">+</button> <span class="price">10.00</span> </div> <div class="cart-item"> <h3>商品2</h3> <button class="minus">-</button> <span class="quantity">1</span> <button class="plus">+</button> <span class="price">20.00</span> </div> </div> //JavaScript部分 $(document).ready(function () { //加按鈕點擊事件 $(".plus").click(function () { //獲取當前商品數量和單價 var quantity = parseInt($(this).siblings(".quantity").html()); var price = parseFloat($(this).siblings(".price").html()); //數量+1,計算新價格 quantity += 1; var newPrice = price * quantity; //更新商品數量和價格 $(this).siblings(".quantity").html(quantity); $(this).siblings(".price").html(newPrice.toFixed(2)); }); //減按鈕點擊事件 $(".minus").click(function () { //獲取當前商品數量和單價 var quantity = parseInt($(this).siblings(".quantity").html()); var price = parseFloat($(this).siblings(".price").html()); //數量-1,計算新價格 if (quantity > 1) { quantity -= 1; var newPrice = price * quantity; //更新商品數量和價格 $(this).siblings(".quantity").html(quantity); $(this).siblings(".price").html(newPrice.toFixed(2)); } }); });
首先在HTML中設置好購物車的結構,為每個商品添加加減數量的按鈕和對應的數量和價格信息。然后在JavaScript中使用jQuery選擇器來獲取商品數量和單價,然后進行加減計算。最后更新商品的數量和價格信息。
通過上述的代碼,我們可以實現商品的數量加減效果,在購物車結算時也可以更準確地計算出商品總價。
上一篇css怎么把鼠標放大