在進行網上購物時,購物車是不可或缺的一個組件。而加減數量功能也是必須的,因此使用 jQuery 制作購物車加減判斷非常實用。
首先,在 HTML 頁面中設置購物車的加減數量按鈕和商品數量的顯示:
<div class="item"> <div class="quantity"> <button class="plus-btn" type="button"><i class="fa fa-plus"></i></button> <input type="number" class="item-qty" value="1" min="1"> <button class="minus-btn" type="button"><i class="fa fa-minus"></i></button> </div> </div>
然后,在 JavaScript 中添加加減判斷功能的代碼:
// 減少商品數量 $('.minus-btn').on('click', function(e) { e.preventDefault(); var $this = $(this); var $input = $this.closest('.quantity').find('input.item-qty'); var value = parseInt($input.val()); if (value > 1) { value = value - 1; } else { value = 1; } $input.val(value); }); // 增加商品數量 $('.plus-btn').on('click', function(e) { e.preventDefault(); var $this = $(this); var $input = $this.closest('.quantity').find('input.item-qty'); var value = parseInt($input.val()); if (value < 99) { value = value + 1; } else { value = 99; } $input.val(value); });
上述代碼中,我們首先使用 jQuery 選擇器找到加減按鈕和顯示數量的 input 元素。然后通過 parseInt() 方法將數量值轉換為整數,便于進行加減操作。接著進行加減判斷,如果加到達上限或減到達下限則不執行操作;否則進行增加或減少操作并將值賦給相應的 input 元素。
最后,我們的購物車加減判斷功能就制作完成了。
上一篇jquery超鏈接單擊
下一篇css怎么把文字透明