使用jQuery實現(xiàn)購物車列表的遞增遞減及刪除商品功能
購物車是電商網(wǎng)站中非常重要的一部分，用戶可以把想要購買的商品加入到購物車中，在結(jié)算時一次性結(jié)算。購物車的列表實現(xiàn)需要包括商品的基本信息、數(shù)量、價格等內(nèi)容，并且需要實現(xiàn)遞增遞減商品數(shù)量和刪除商品的功能。
購物車是電商網(wǎng)站中非常重要的一部分，用戶可以把想要購買的商品加入到購物車中，在結(jié)算時一次性結(jié)算。購物車的列表實現(xiàn)需要包括商品的基本信息、數(shù)量、價格等內(nèi)容，并且需要實現(xiàn)遞增遞減商品數(shù)量和刪除商品的功能。在本文中，我們將介紹如何使用jQuery框架來實現(xiàn)這些功能。
引入jQuery.js前端框架
首先，我們需要在頁面中引入jQuery.js前端框架，這個框架可以幫助我們更方便地處理DOM操作和事件處理。在HTML代碼中添加以下代碼即可引入jQuery：
```html
```
添加遞增遞減商品功能
當用戶點擊“ ”或“-”按鈕時，需要動態(tài)修改對應商品的數(shù)量和總價。為了實現(xiàn)這個功能，我們需要給每個商品的加減按鈕綁定點擊事件，并在事件處理函數(shù)中更新相關數(shù)據(jù)。
假設每個商品的HTML代碼如下：
```html
1
```
我們可以使用以下jQuery代碼來實現(xiàn)遞減和遞增功能：
```js
$('.product').on('click', '.decrease', function() {
var num $(this).siblings('.num');
var price $(this).closest('.product').find('.price');
var total $(this).closest('.product').find('.total');
var val parseInt(num.text());
if (val > 1) {
val--;
num.text(val);
total.text('￥' (parseInt(price.text().slice(1)) * val).toFixed(2));
}
});
$('.product').on('click', '.increase', function() {
var num $(this).siblings('.num');
var price $(this).closest('.product').find('.price');
var total $(this).closest('.product').find('.total');
var val parseInt(num.text());
val ;
num.text(val);
total.text('￥' (parseInt(price.text().slice(1)) * val).toFixed(2));
});
```
代碼解析：
- 使用`.on()`方法綁定點擊事件，`.product`是商品容器的類名，`.decrease`和`.increase`分別代表減少和增加按鈕的類名。
- 在事件處理函數(shù)中，首先獲取當前商品的數(shù)量、單價和總價元素。
- 然后根據(jù)點擊的按鈕進行判斷，如果是減少按鈕并且數(shù)量大于1，則數(shù)量減1，并重新計算總價；如果是增加按鈕，則數(shù)量加1，并重新計算總價。
添加刪除商品功能
當用戶想要刪除某個商品時，需要從購物車中將該商品移除。為了實現(xiàn)該功能，我們可以給每個商品的刪除按鈕綁定點擊事件，并在事件處理函數(shù)中將該商品對應的DOM元素刪除。
假設每個商品的HTML代碼如下：
```html
1
```
我們可以使用以下jQuery代碼來實現(xiàn)刪除功能：
```js
$('.product').on('click', '.remove', function() {
$(this).closest('.product').remove();
});
```
代碼解析：
- 使用`.on()`方法綁定點擊事件，`.product`是商品容器的類名，`.remove`是刪除按鈕的類名。
- 在事件處理函數(shù)中，使用`.closest()`方法找到最近的`.product`元素，并將其刪除。
編寫控制器代碼
上面的代碼只是前端代碼，還需要與后端進行數(shù)據(jù)交互，動態(tài)獲取商品的數(shù)量和價格信息。我們可以使用PHP作為后端語言，編寫一個控制器來處理這些數(shù)據(jù)。
假設我們有一個名為``的控制器文件，其中包含以下代碼：
```php
header('Content-Type: application/json');
$products array(
array('id' > 1, 'name' > 'iPhone 12 Pro Max', 'price' > 9999),
array('id' > 2, 'name' > '華為Mate 40 Pro', 'price' > 7999)
);
if (isset($_POST['action'])) {
switch ($_POST['action']) {
case 'get':
echo json_encode($products);
break;
case 'update':
$id intval($_POST['id']);
$num intval($_POST['num']);
foreach ($products as $p) {
if ($p['id'] $id) {
$p['num'] $num;
break;
}
}
echo json_encode(array('success' > true));
break;
}
}
?>
```
代碼解析：
- 第1行設置響應頭，告訴瀏覽器返回的是JSON格式的數(shù)據(jù)。
- 第3-6行定義一個二維數(shù)組`$products`，包含兩個商品的基本信息（ID、名稱、單價）。
- 當收到客戶端發(fā)送的POST請求時，根據(jù)不同的操作類型進行相應的處理。如果是獲取商品信息，直接返回`$products`數(shù)組；如果是更新商品數(shù)量，循環(huán)遍歷`$products`數(shù)組，通過商品ID找到對應的商品，并更新數(shù)量。
測試購物車功能
最后，我們需要測試代碼的正確性和可用性。在HTML代碼中添加以下測試代碼：
```js
$(function() {
$.post('', { action: 'get' }, function(data) {
var html '';
for (var i 0; i < data.length; i ) {
var p data[i];
html '
'
'
'
''
'1'
''
'
''
'
}
$('cart').html(html);
});
});
```
代碼解析：
- 使用`$.post()`方法向``發(fā)送POST請求，請求參數(shù)為`{ action: 'get' }`，表示獲取所有商品的基本信息。
- 獲取服務器返回的JSON格式數(shù)據(jù)，遍歷每個商品的信息，并生成對應的HTML代碼。
- 將生成的HTML代碼添加到頁面中指定的元素中（假設該元素的ID為`cart`）。
現(xiàn)在，我們就可以通過瀏覽器打開頁面，測試購物車的遞增遞減和刪除商品的功能了！