js怎么实现同时选购多种商品

JS 实现同时选购多种商品的方法有：使用数组管理购物车、事件监听器处理用户交互、动态更新购物车显示。其中，使用数组管理购物车是关键，因为它能灵活高效地存储和操作商品信息。

一、使用数组管理购物车

使用数组管理购物车是实现同时选购多种商品的基础。数组可以存储多个商品的详细信息，如商品ID、名称、数量、价格等。通过操作数组，可以方便地添加、删除或更新商品信息。

1.1 初始化购物车数组

首先，需要初始化一个空数组来存储购物车中的商品信息：

let shoppingCart = [];

1.2 添加商品到购物车

定义一个函数来添加商品到购物车中。这个函数需要接受商品的详细信息作为参数，并将其存储在购物车数组中：

function addToCart(productId, productName, productPrice, productQuantity) {
    const product = {
        id: productId,
        name: productName,
        price: productPrice,
        quantity: productQuantity
    };
    shoppingCart.push(product);
}

1.3 更新购物车中的商品

如果用户选择了已经在购物车中的商品，可以通过更新商品数量来处理：

function updateCart(productId, newQuantity) {
    for (let product of shoppingCart) {
        if (product.id === productId) {
            product.quantity = newQuantity;
            break;
        }
    }
}

二、事件监听器处理用户交互

为了实现用户与购物车的交互，需要使用事件监听器来捕捉用户的操作，并调用相应的函数处理这些操作。

2.1 添加商品按钮事件

假设页面上有一个添加商品按钮，当用户点击按钮时，触发相应的事件处理函数：

document.getElementById('addToCartButton').addEventListener('click', function() {
    const productId = this.dataset.productId;
    const productName = this.dataset.productName;
    const productPrice = parseFloat(this.dataset.productPrice);
    const productQuantity = parseInt(document.getElementById('quantityInput').value);
    addToCart(productId, productName, productPrice, productQuantity);
    updateCartDisplay();
});

2.2 更新商品数量事件

当用户更改购物车中某个商品的数量时，需要触发更新购物车的函数：

document.getElementById('cart').addEventListener('change', function(event) {
    if (event.target.classList.contains('quantityInput')) {
        const productId = event.target.dataset.productId;
        const newQuantity = parseInt(event.target.value);
        updateCart(productId, newQuantity);
        updateCartDisplay();
    }
});

三、动态更新购物车显示

为了让用户实时看到购物车的变化，需要动态更新购物车的显示。可以通过修改DOM元素来实现这一点。

3.1 创建购物车显示函数

定义一个函数来更新购物车的显示，这个函数会遍历购物车数组，并生成相应的HTML内容：

function updateCartDisplay() {
    const cartContainer = document.getElementById('cartContainer');
    cartContainer.innerHTML = '';
    for (let product of shoppingCart) {
        const productElement = document.createElement('div');
        productElement.classList.add('cartItem');
        productElement.innerHTML = `
            <span>${product.name}</span>
            <span>${product.price}</span>
            <input type="number" class="quantityInput" data-product-id="${product.id}" value="${product.quantity}">
            <span>${product.price * product.quantity}</span>
        `;
        cartContainer.appendChild(productElement);
    }
}

3.2 初始化购物车显示

在页面加载时，初始化购物车显示：

document.addEventListener('DOMContentLoaded', function() {
    updateCartDisplay();
});

四、计算购物车总价

为了方便用户查看购物车总价，可以定义一个函数来计算并显示购物车的总价。

4.1 计算总价函数

定义一个函数来计算购物车中所有商品的总价：

function calculateTotalPrice() {
    let totalPrice = 0;
    for (let product of shoppingCart) {
        totalPrice += product.price * product.quantity;
    }
    return totalPrice;
}

4.2 显示总价

在更新购物车显示时，同时更新总价的显示：

function updateCartDisplay() {
    const cartContainer = document.getElementById('cartContainer');
    cartContainer.innerHTML = '';
    for (let product of shoppingCart) {
        const productElement = document.createElement('div');
        productElement.classList.add('cartItem');
        productElement.innerHTML = `
            <span>${product.name}</span>
            <span>${product.price}</span>
            <input type="number" class="quantityInput" data-product-id="${product.id}" value="${product.quantity}">
            <span>${product.price * product.quantity}</span>
        `;
        cartContainer.appendChild(productElement);
    }
    const totalPrice = calculateTotalPrice();
    document.getElementById('totalPrice').innerText = `Total Price: $${totalPrice.toFixed(2)}`;
}

五、购物车的持久化存储

为了确保用户在刷新页面后购物车信息不会丢失，可以使用浏览器的本地存储（LocalStorage）来保存购物车数据。

5.1 保存购物车数据到本地存储

定义一个函数来保存购物车数据到本地存储：

function saveCartToLocalStorage() {
    localStorage.setItem('shoppingCart', JSON.stringify(shoppingCart));
}

5.2 从本地存储中加载购物车数据

定义一个函数从本地存储中加载购物车数据：

function loadCartFromLocalStorage() {
    const savedCart = localStorage.getItem('shoppingCart');
    if (savedCart) {
        shoppingCart = JSON.parse(savedCart);
        updateCartDisplay();
    }
}

5.3 在适当时机保存购物车数据

在添加商品或更新购物车时，调用保存购物车数据的函数：

function addToCart(productId, productName, productPrice, productQuantity) {
    const product = {
        id: productId,
        name: productName,
        price: productPrice,
        quantity: productQuantity
    };
    shoppingCart.push(product);
    saveCartToLocalStorage();
}
function updateCart(productId, newQuantity) {
    for (let product of shoppingCart) {
        if (product.id === productId) {
            product.quantity = newQuantity;
            break;
        }
    }
    saveCartToLocalStorage();
}

在页面加载时，调用加载购物车数据的函数：

document.addEventListener('DOMContentLoaded', function() {
    loadCartFromLocalStorage();
    updateCartDisplay();
});

通过以上步骤，我们成功实现了使用JavaScript同时选购多种商品的功能，并确保购物车信息在页面刷新后仍然存在。这样可以极大地提升用户体验，使他们能够方便地管理和查看购物车中的商品。