重复点击添加购物车实现数量+1怎么写
时间: 2024-02-20 14:58:03 浏览: 36
下面是一个使用前端保存的方式实现重复点击添加购物车数量+1的示例代码:
```javascript
// 获取购物车信息
function getCart() {
let cart = JSON.parse(localStorage.getItem('cart')) || [];
return cart;
}
// 添加商品到购物车
function addToCart(product) {
let cart = getCart();
let index = cart.findIndex(item => item.id === product.id);
if (index !== -1) {
// 如果商品已经存在于购物车中,则数量+1
cart[index].quantity += 1;
} else {
// 否则将商品信息添加到购物车中
cart.push({
id: product.id,
name: product.name,
price: product.price,
quantity: 1
});
}
// 保存购物车信息
localStorage.setItem('cart', JSON.stringify(cart));
}
// 点击添加购物车按钮时调用的函数
function onAddToCartClick() {
let product = {
id: 1,
name: '商品1',
price: 10.0
};
addToCart(product);
}
```
上面的代码中,getCart函数用于获取保存在本地存储中的购物车信息,addToCart函数用于将商品添加到购物车中,并实现了重复点击添加购物车数量+1的功能。在addToCart函数中,先使用findIndex函数查找购物车中是否已经存在该商品,如果存在,则将数量+1,否则将商品信息添加到购物车中。最后使用localStorage.setItem函数保存购物车信息。在实际项目中,需要根据实际情况修改商品信息和购物车信息的数据结构。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)