jQuery購物車加減版是一款實用的插件,可用于網站或應用程序的購物車功能。該插件使用jQuery框架開發,包含加、減、刪除、總計等基本功能,方便用戶對購物車商品進行管理。下面是該插件的實現代碼,其中使用到了jQuery庫的選擇器和事件綁定等常見操作:
$(function() { var quantity = 1; //商品數量默認值 var price = 10; //商品單價 var $quantityInput = $('#quantity-input'); //數量輸入框 var $priceDisplay = $('#price-display'); //總價顯示框 //增加按鈕點擊事件 $('#plus-btn').click(function() { quantity++; $quantityInput.val(quantity); $priceDisplay.text(quantity * price); //更新總價 }); //減少按鈕點擊事件 $('#minus-btn').click(function() { quantity--; if (quantity < 1) { quantity = 1; } $quantityInput.val(quantity); $priceDisplay.text(quantity * price); //更新總價 }); //刪除按鈕點擊事件 $('#remove-btn').click(function() { quantity = 1; //重置數量 $quantityInput.val(quantity); $priceDisplay.text(quantity * price); //重置總價 }); });
通過上述代碼,我們可以看到,該插件主要包括三個事件:增加按鈕點擊事件、減少按鈕點擊事件和刪除按鈕點擊事件。具體實現時,我們首先定義了商品數量和單價的默認值,以及數量輸入框和總價顯示框的jQuery對象。然后,當增加按鈕被點擊時,我們將商品數量加1,并將新值賦給數量輸入框和總價顯示框。同理,當減少按鈕被點擊時,我們將商品數量減1,但保證數量不小于1,并同樣更新數量輸入框和總價顯示框。最后,當刪除按鈕被點擊時,我們將商品數量重置為1,并將其賦給數量輸入框和總價顯示框。