使用jQuery實(shí)現(xiàn)購物車列表的遞增遞減及刪除商品功能
購物車是電商網(wǎng)站中非常重要的一部分，用戶可以把想要購買的商品加入到購物車中，在結(jié)算時(shí)一次性結(jié)算。購物車的列表實(shí)現(xiàn)需要包括商品的基本信息、數(shù)量、價(jià)格等內(nèi)容，并且需要實(shí)現(xiàn)遞增遞減商品數(shù)量和刪除商品的功能。
購物車是電商網(wǎng)站中非常重要的一部分，用戶可以把想要購買的商品加入到購物車中，在結(jié)算時(shí)一次性結(jié)算。購物車的列表實(shí)現(xiàn)需要包括商品的基本信息、數(shù)量、價(jià)格等內(nèi)容，并且需要實(shí)現(xiàn)遞增遞減商品數(shù)量和刪除商品的功能。在本文中，我們將介紹如何使用jQuery框架來實(shí)現(xiàn)這些功能。
引入jQuery.js前端框架
首先，我們需要在頁面中引入jQuery.js前端框架，這個(gè)框架可以幫助我們更方便地處理DOM操作和事件處理。在HTML代碼中添加以下代碼即可引入jQuery：
```html
```
添加遞增遞減商品功能
當(dāng)用戶點(diǎn)擊“ ”或“-”按鈕時(shí)，需要?jiǎng)討B(tài)修改對(duì)應(yīng)商品的數(shù)量和總價(jià)。為了實(shí)現(xiàn)這個(gè)功能，我們需要給每個(gè)商品的加減按鈕綁定點(diǎn)擊事件，并在事件處理函數(shù)中更新相關(guān)數(shù)據(jù)。
假設(shè)每個(gè)商品的HTML代碼如下：
```html
1
```
我們可以使用以下jQuery代碼來實(shí)現(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()`方法綁定點(diǎn)擊事件，`.product`是商品容器的類名，`.decrease`和`.increase`分別代表減少和增加按鈕的類名。
- 在事件處理函數(shù)中，首先獲取當(dāng)前商品的數(shù)量、單價(jià)和總價(jià)元素。
- 然后根據(jù)點(diǎn)擊的按鈕進(jìn)行判斷，如果是減少按鈕并且數(shù)量大于1，則數(shù)量減1，并重新計(jì)算總價(jià)；如果是增加按鈕，則數(shù)量加1，并重新計(jì)算總價(jià)。
添加刪除商品功能
當(dāng)用戶想要?jiǎng)h除某個(gè)商品時(shí)，需要從購物車中將該商品移除。為了實(shí)現(xiàn)該功能，我們可以給每個(gè)商品的刪除按鈕綁定點(diǎn)擊事件，并在事件處理函數(shù)中將該商品對(duì)應(yīng)的DOM元素刪除。
假設(shè)每個(gè)商品的HTML代碼如下：
```html
1
```
我們可以使用以下jQuery代碼來實(shí)現(xiàn)刪除功能：
```js
$('.product').on('click', '.remove', function() {
$(this).closest('.product').remove();
});
```
代碼解析：
- 使用`.on()`方法綁定點(diǎn)擊事件，`.product`是商品容器的類名，`.remove`是刪除按鈕的類名。
- 在事件處理函數(shù)中，使用`.closest()`方法找到最近的`.product`元素，并將其刪除。
編寫控制器代碼
上面的代碼只是前端代碼，還需要與后端進(jìn)行數(shù)據(jù)交互，動(dòng)態(tài)獲取商品的數(shù)量和價(jià)格信息。我們可以使用PHP作為后端語言，編寫一個(gè)控制器來處理這些數(shù)據(jù)。
假設(shè)我們有一個(gè)名為``的控制器文件，其中包含以下代碼：
```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行設(shè)置響應(yīng)頭，告訴瀏覽器返回的是JSON格式的數(shù)據(jù)。
- 第3-6行定義一個(gè)二維數(shù)組`$products`，包含兩個(gè)商品的基本信息（ID、名稱、單價(jià)）。
- 當(dāng)收到客戶端發(fā)送的POST請(qǐng)求時(shí)，根據(jù)不同的操作類型進(jìn)行相應(yīng)的處理。如果是獲取商品信息，直接返回`$products`數(shù)組；如果是更新商品數(shù)量，循環(huán)遍歷`$products`數(shù)組，通過商品ID找到對(duì)應(yīng)的商品，并更新數(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請(qǐng)求，請(qǐng)求參數(shù)為`{ action: 'get' }`，表示獲取所有商品的基本信息。
- 獲取服務(wù)器返回的JSON格式數(shù)據(jù)，遍歷每個(gè)商品的信息，并生成對(duì)應(yīng)的HTML代碼。
- 將生成的HTML代碼添加到頁面中指定的元素中（假設(shè)該元素的ID為`cart`）。
現(xiàn)在，我們就可以通過瀏覽器打開頁面，測試購物車的遞增遞減和刪除商品的功能了！