Jquery購物車是一個(gè)非常流行的在線購物工具，讓用戶可以方便地添加商品到購物車?yán)铩６谫徫镘囍校脩暨€可以對已添加的商品進(jìn)行編輯，比如修改商品數(shù)量、刪除商品等。下面我們就來介紹一下如何使用Jquery購物車實(shí)現(xiàn)這些功能。

$(function(){
// 獲取購物車中的商品列表
var cartList = JSON.parse(localStorage.getItem('cartList'));
// 綁定編輯按鈕的點(diǎn)擊事件
$('.editBtn').on('click', function(){
// 獲取當(dāng)前商品的id及數(shù)量
var itemId = $(this).attr('data-id');
var itemNum = $(this).closest('tr').find('.itemNum').val();
// 在彈出框中顯示當(dāng)前商品的信息
$('#modalItemId').val(itemId);
$('#modalItemNum').val(itemNum);
$('#editModal').modal('show');
});
// 綁定保存按鈕的點(diǎn)擊事件
$('#saveBtn').on('click', function(){
// 獲取彈出框中的商品信息
var itemId = $('#modalItemId').val();
var itemNum = $('#modalItemNum').val();
// 更新購物車中當(dāng)前商品的數(shù)量
for(var i=0; i<cartList.length; i++){
if(cartList[i].itemId == itemId){
cartList[i].itemNum = itemNum;
break;
}
}
// 保存更新后的購物車信息
localStorage.setItem('cartList', JSON.stringify(cartList));
// 刷新頁面顯示最新的購物車信息
window.location.reload();
});
// 綁定刪除按鈕的點(diǎn)擊事件
$('.delBtn').on('click', function(){
// 獲取當(dāng)前商品的id
var itemId = $(this).attr('data-id');
// 從購物車數(shù)組中刪除當(dāng)前商品
for(var i=0; i<cartList.length; i++){
if(cartList[i].itemId == itemId){
cartList.splice(i, 1);
break;
}
}
// 保存更新后的購物車信息
localStorage.setItem('cartList', JSON.stringify(cartList));
// 刷新頁面顯示最新的購物車信息
window.location.reload();
});
});

以上是Jquery購物車編輯功能的實(shí)現(xiàn)代碼，通過綁定按鈕的點(diǎn)擊事件，我們可以方便地對購物車中的商品進(jìn)行編輯。