为了回答这个问题，我们将提供使用纯JavaScript和jQuery实现简单购物车的代码示例。
纯JavaScript实现购物车
HTML结构:
<div id="cart">
<h2>我的购物车</h2>
<ul id="cart-items"></ul>
</div>
JavaScript代码:
// 购物车中的商品列表
let cartItems = [];
// 添加商品到购物车
function addToCart(item) {
cartItems.push(item);
// 更新购物车显示
updateCartView();
}
// 更新购物车视图
function updateCartView() {
let cartList = document.getElementById('cart-items');
cartList.innerHTML = ''; // 清空购物车列表
cartItems.forEach(item => {
let listItem = document.createElement('li');
listItem.textContent = item.name + ' - ¥' + item.price;
cartList.appendChild(listItem);
});
}
// 示例商品
let product = { name: '笔记本电脑', price: 9999 };
addToCart(product);
jQuery实现购物车
HTML结构:
<div id="jquery-cart">
<h2>我的购物车</h2>
<ul id="jquery-cart-items"></ul>
</div>
jQuery代码:
// 假设已经在HTML中引入了jQuery库
// 购物车中的商品列表
let cartItems = [];
// 添加商品到购物车
function addToCart(item) {
cartItems.push(item);
// 更新购物车显示
updateCartView();
}
// 更新购物车视图
function updateCartView() {
$('#jquery-cart-items').empty(); // 清空购物车列表
cartItems.forEach(item => {
$('#jquery-cart-items').append(`<li>${item.name} - ¥${item.price}</li>`);
});
}
// 示例商品
let product = { name: '笔记本电脑', price: 9999 };
addToCart(product);
这两个示例都展示了如何添加商品到购物车，并更新购物车视图以显示最新的商品列表。在纯JavaScript的实现中，我们直接操作DOM，而在jQuery的实现中，我们利用了jQuery库的简便方法来更新视图。两者都可以满足基本的购物车需求。