文章编号：1497 / 更新时间：2024-12-30 16:58:15 / 浏览：次
javascript 代码 (main.js) javascript $(document).ready(function() {// 获取购物车中的商品列表var cartItems = [];// 添加商品至购物车$('.add-to-cart').click(function() {var item = $(this).closest('.item');var name = item.find('h2').text();var price = parseFloat(item.find('.price').text().replace('$', ''));var quantity = parseInt(item.find('input[type="number"]').val());cartItems.push({name: name,price: price,quantity: quantity});// 更新购物车中的商品列表updateCart();});// 从购物车中移除商品$('.remove-from-cart').click(function() {var item = $(this).closest('.item');var name = item.find('h2').text();// 从 cartItems 中移除该商品cartItems = cartItems.filter(function(item) {return item.name !== name;});// 更新购物车中的商品列表updateCart();});// 更新购物车中的商品列表function updateCart() {// 清空购物车$('.cart ul').empty();// 遍历 cartItems 并将商品添加到购物车中cartItems.forEach(function(item) {var li = $('

').addClass('item');var img = $(' ').attr('src', 'images/' + item.name.toLowerCase() + '.jpg').attr('alt', item.name);var description = $('

').addClass('description');var h2 = $('

').text(item.name);var span = $(' ').addClass('price').text('$' + item.price.toFixed(2));var input = $(' ').attr('type', 'number').attr('min', 1).val(item.quantity);var button = $(' ').addClass('remove-from-cart').text('移除');description.append(h2, span, input, button);li.append(img, description);$('.cart ul').append(li);});// 计算总价var total = cartItems.reduce(function(acc, item) {return acc + item.price item.quantity;}, 0);// 更新总价$('.cart .total .price').text('$' + total.toFixed(2));} });

相关标签： 购物车代码jquery、 购物车代码java、

本文地址：https://www.qianwe.cn/article/bed1c4e1e84bd93b8b99.html

上一篇：企业网站源码php企业网站源码html...
下一篇：购物车代码详细说明购物车代码详解...