更新购物车页面中产品的数量

Question

我在一个电子商务商店工作，我在购物车页面中更新产品数量时遇到了问题。(例如，当有人在数量标签中添加多个产品时，应该在购物车页面中添加该数字，并且应该使用该产品数量计算总价)。我创建了一个从右侧弹出的SideCart。欢迎大家的帮助!!

const cartButton = document.getElementById('cart-button');
const cart = document.querySelector('.cart');
const cartItems = document.getElementById('cart-items');
const cartTotal = document.getElementById('cart-total');
const addButtons = document.querySelectorAll('.add-to-cart');
let cartItemsArray = [];
function renderCartItems() {
cartItems.innerHTML = '';
cartItemsArray.forEach(item => {
const li = document.createElement('li');
li.innerHTML = `
<img src="${item.image}" alt="${item.name}">
<span>${item.name} x ${item.quantity}</span>
<span>$${item.price * item.quantity}</span>
`;
cartItems.appendChild(li);
});
cartTotal.textContent = calculateCartTotal();
}
function calculateCartTotal() {
let total = 0;
cartItemsArray.forEach(item => {
total += item.price * item.quantity;
});
return total.toFixed(2);
}
function addToCart(name, price, image) {
const existingItem = cartItemsArray.find(item => item.name === name);
if (existingItem) {
existingItem.quantity++;
} else {
cartItemsArray.push({ name, price, image, quantity: 1 });
}
renderCartItems();
}
cartButton.addEventListener('click', () => {
cart.classList.toggle('show');
});
addButtons.forEach(button => {
const name = button.getAttribute('data-name');
const price = button.getAttribute('data-price');
const image = button.parentNode.querySelector('img').getAttribute('src');
button.addEventListener('click', () => {
addToCart(name, price, image);
});
});

<div class="container">
<button id="cart-button">Cart</button>
<div class="products">
<div class="product">
<img src="./vision_red_front.png" alt="Product 1">
<h3>Product 1</h3>
<p>Price: $10</p>
<div class="quantity">
<span class="quantity">quantity : </span>
<input type="number" id="num" class="quantity" oninput="calc()" min="1" max="1000" value="1" />
</div>
<button id="cart-button" class="add-to-cart" data-name="Product 1" data-price="10">Add to Cart</button>
</div>
<div class="product">
<img src="./vision_red_front.png" alt="Product 2">
<h3>Product 2</h3>
<p>Price: $20</p>
<label for="product1-quantity">Quantity:</label>
<input type="number" id="product1-quantity" class="product-quantity" value="1">
<button class="add-to-cart" data-name="Product 2" data-price="20">Add to Cart</button>
</div>
</div>
<div class="cart">
<h3>Cart</h3>
<ul id="cart-items"></ul>
<p>Total: $<span id="cart-total">0</span></p>
<a href="#"><button class="checkout" id="checkout"> Checkout</button></a>
</div>

</div>

Answer 1

按下按钮时需要访问input的value，因此调用addToCart时需要传递对button.parentNode.querySelector('input')的引用。这些属性可以被JavaScript读取。

虽然属性是数字，但value属性是字符串，所以使用parseInt来获取数字。

existingItem.quantity+=parseInt(q.value);

const cartButton = document.getElementById('cart-button');
const cart = document.querySelector('.cart');
const cartItems = document.getElementById('cart-items');
const cartTotal = document.getElementById('cart-total');
const addButtons = document.querySelectorAll('.add-to-cart');
let cartItemsArray = [];
function renderCartItems() {
cartItems.innerHTML = '';
cartItemsArray.forEach(item => {
const li = document.createElement('li');
li.innerHTML = `
<img src="${item.image}" alt="${item.name}">
<span>${item.name} x ${item.quantity}</span>
<span>$${item.price * item.quantity}</span>
`;
cartItems.appendChild(li);
});
cartTotal.textContent = calculateCartTotal();
}
function calculateCartTotal() {
let total = 0;
cartItemsArray.forEach(item => {
total += item.price * item.quantity;
});
return total.toFixed(2);
}
function addToCart(name, price, image, q) {
const existingItem = cartItemsArray.find(item => item.name === name);
if (existingItem) {
existingItem.quantity+=parseInt(q.value);
} else {
cartItemsArray.push({ name, price, image, quantity: 1 });
}
renderCartItems();
}
cartButton.addEventListener('click', () => {
cart.classList.toggle('show');
});
addButtons.forEach(button => {
const name = button.getAttribute('data-name');
const price = button.getAttribute('data-price');
const image = button.parentNode.querySelector('img').getAttribute('src');
const quantity = button.parentNode.querySelector('input');
button.addEventListener('click', () => 
{addToCart(name, price, image, quantity);}
);
});

<div class="container">
<button id="cart-button">Cart</button>
<div class="products">
<div class="product">
<img src="./vision_red_front.png" alt="Product 1">
<h3>Product 1</h3>
<p>Price: $10</p>
<div class="quantity">
<span class="quantity">quantity : </span>
<input type="number" min=1 max=100 value=1 />
</div>
<button id="cart-button" class="add-to-cart" data-name="Product 1" data-price="10">Add to Cart</button>
</div>
<div class="product">
<img src="./vision_red_front.png" alt="Product 2">
<h3>Product 2</h3>
<p>Price: $20</p>
<label for="product1-quantity">Quantity:</label>
<input type="number" id="product1-quantity" class="product-quantity" value="1">
<button class="add-to-cart" data-name="Product 2" data-price="20">Add to Cart</button>
</div>
</div>
<div class="cart">
<h3>Cart</h3>
<ul id="cart-items"></ul>
<p>Total: $<span id="cart-total">0</span></p>
<a href="#"><button class="checkout" id="checkout"> Checkout</button></a>
</div>

</div>