加入购物车js完整代码
时间: 2023-08-04 12:07:00 浏览: 89
以下是一个简单的加入购物车 JavaScript 代码示例:
```javascript
// 获取“加入购物车”按钮元素
const addToCartBtn = document.querySelector('.add-to-cart-btn');
// 获取购物车元素
const cartItems = document.querySelector('.cart-items');
// 给“加入购物车”按钮添加点击事件
addToCartBtn.addEventListener('click', function() {
// 获取商品名称和价格
const itemName = document.querySelector('.item-name').textContent;
const itemPrice = document.querySelector('.item-price').textContent;
// 创建新的购物车项元素
const cartItem = document.createElement('div');
cartItem.classList.add('cart-item');
cartItem.innerHTML = `
<span class="cart-item-name">${itemName}</span>
<span class="cart-item-price">${itemPrice}</span>
<button class="remove-cart-item">Remove</button>
`;
// 添加新的购物车项到购物车
cartItems.appendChild(cartItem);
// 清空商品名称和价格
document.querySelector('.item-name').textContent = '';
document.querySelector('.item-price').textContent = '';
});
// 给购物车元素添加点击事件,以便用户可以删除购物车项
cartItems.addEventListener('click', function(event) {
if (event.target.classList.contains('remove-cart-item')) {
event.target.parentElement.remove();
}
});
```
这个示例代码假设你有一个 HTML 页面,包含一个“加入购物车”按钮和一个购物车元素,类名分别为`.add-to-cart-btn`和`.cart-items`。当用户点击“加入购物车”按钮时,代码会获取商品名称和价格,然后创建一个新的购物车项元素,将其添加到购物车中。同时,当用户点击购物车中的“Remove”按钮时,该购物车项将被删除。