写一个jQuery的仿制京东商城购物车前端局部更新效果
时间: 2023-05-23 12:07:15 浏览: 260
A:
首先,需要在页面中引入jQuery库:
```html
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
```
然后,在页面中编写购物车的HTML结构:
```html
<div class="cart">
<ul class="cart-items">
<li class="cart-item" data-id="1">
<div class="item-info">
<img src="https://img11.360buyimg.com/n7/jfs/t22609/104/526174295/257744/4b61e853/5b1c8dceNb0f15024.jpg" alt="">
<div class="item-desc">
<div class="item-name">华为(HUAWEI)畅享 20 Pro 5G 全网通 8GB+128GB 酒红色</div>
<p class="item-price">¥2199.00</p>
</div>
</div>
<div class="item-count">
<span class="sub-count">-</span>
<input type="text" value="1">
<span class="add-count">+</span>
</div>
</li>
<li class="cart-item" data-id="2">
<!-- 商品2的信息 -->
</li>
</ul>
<div class="cart-total">
<span>合计:</span><span class="total-price">¥0.00</span>
</div>
</div>
```
接下来,编写jQuery代码实现购物车的局部更新效果:
```javascript
$(function() {
// 点击加号按钮,增加商品数量
$('.add-count').click(function() {
var $input = $(this).siblings('input');
var count = parseInt($input.val()) + 1;
$input.val(count);
updateCart();
});
// 点击减号按钮,减少商品数量
$('.sub-count').click(function() {
var $input = $(this).siblings('input');
var count = parseInt($input.val()) - 1;
if(count < 1) {
count = 1;
}
$input.val(count);
updateCart();
});
// 输入框失去焦点,更新商品数量
$('.item-count input').blur(function() {
var count = parseInt($(this).val());
if(count < 1) {
count = 1;
}
$(this).val(count);
updateCart();
});
// 更新购物车信息
function updateCart() {
var totalPrice = 0;
$('.cart-item').each(function() {
var count = parseInt($(this).find('input').val());
var price = parseFloat($(this).find('.item-price').text().substring(1));
$(this).find('.item-count input').val(count);
var itemTotalPrice = count * price;
$(this).find('.total-price').text('¥' + itemTotalPrice.toFixed(2));
totalPrice += itemTotalPrice;
});
$('.cart-total .total-price').text('¥' + totalPrice.toFixed(2));
}
});
```
以上代码实现了点击加号和减号按钮、输入框失去焦点时修改商品数量,以及根据数量计算总价并更新购物车信息的功能。可以根据实际需求进行修改和扩展。
阅读全文