隨著手機和電腦的廣泛普及,網購已經成為了我們生活中不可或缺的一部分。而在網購的過程中,購物車的實現尤為重要。今天我們就來學習使用jquery實現購物車物品的加減功能。
$(document).ready(function(){ // 獲取加減按鈕與數量輸入框 var numInput = $("#numInput"); var plusBtn = $("#plusBtn"); var minusBtn = $("#minusBtn"); // 點擊加號按鈕 plusBtn.click(function(){ // 獲取當前數量 var num = parseInt(numInput.val()); // 數量加1 num += 1; // 更新數量 numInput.val(num); }); // 點擊減號按鈕 minusBtn.click(function(){ // 獲取當前數量 var num = parseInt(numInput.val()); // 數量減1 if(num > 1){ num -= 1; // 更新數量 numInput.val(num); }else{ alert("物品數量不能小于1!"); } }); });
上述代碼中,我們首先獲取了加減按鈕與數量輸入框的jquery對象。接著,在點擊加號按鈕時,我們通過parseInt()函數將當前數量轉換為整型,并將數量加1,最后更新了數量輸入框的數值。同理,在點擊減號按鈕時,如果當前數量大于1,則將數量減1,否則彈出提示框。
以上就是使用jquery實現購物車物品加減功能的全部代碼,相信大家都可以輕松掌握。加油!
下一篇css怎么新建站點