jquery实现购物车
时间: 2023-11-20 08:54:11 浏览: 108
jQuery实现购物车是一种常见的网页开发技术,它可以通过JavaScript和jQuery库来实现购物车的添加、删除、修改、计算总价等功能。一般来说,购物车的实现需要以下几个步骤:
1. 给商品添加“加入购物车”按钮,点击按钮时将商品信息添加到购物车中。
2. 在页面上显示购物车的内容,包括商品名称、数量、单价、小计等信息。
3. 实现购物车中商品数量、金额随数量、选中改变而改变的功能。
4. 实现加减操作同时改变小计的功能。
下面是一个简单的jQuery购物车实现的示例代码:
```
// 添加商品到购物车
$('.add-to-cart').click(function() {
var item = $(this).closest('.item');
var name = item.find('.name').text();
var price = parseFloat(item.find('.price').text());
var quantity = parseInt(item.find('.quantity').val());
var subtotal = price * quantity;
var cartItem = $('<div class="cart-item"></div>');
cartItem.append('<div class="name">' + name + '</div>');
cartItem.append('<div class="price">' + price.toFixed(2) + '</div>');
cartItem.append('<div class="quantity">' + quantity + '</div>');
cartItem.append('<div class="subtotal">' + subtotal.toFixed(2) + '</div>');
$('.cart-items').append(cartItem);
});
// 计算购物车总价
function calculateTotal() {
var total = 0;
$('.cart-item').each(function() {
var subtotal = parseFloat($(this).find('.subtotal').text());
total += subtotal;
});
$('.total').text(total.toFixed(2));
}
// 商品数量、金额随数量、选中改变而改变
$('.quantity').change(function() {
var quantity = parseInt($(this).val());
var price = parseFloat($(this).closest('.cart-item').find('.price').text());
var subtotal = price * quantity;
$(this).closest('.cart-item').find('.subtotal').text(subtotal.toFixed(2));
calculateTotal();
});
$('.checkbox').change(function() {
calculateTotal();
});
// 加减操作同时改变小计
$('.increment').click(function() {
var quantity = parseInt($(this).siblings('.quantity').val());
$(this).siblings('.quantity').val(quantity + 1).change();
});
$('.decrement').click(function() {
var quantity = parseInt($(this).siblings('.quantity').val());
if (quantity > 1) {
$(this).siblings('.quantity').val(quantity - 1).change();
}
});
```
阅读全文