纯JS实现购物车&jQuery实现购物车

为了回答这个问题，我们将提供使用纯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库的简便方法来更新视图。两者都可以满足基本的购物车需求。