前端事件委托实现一个简易版购物车计算价格,每一个商品列表项包含增减商品按钮并且显示商品的件数,单价和小计,并且随时计算总的商品件数和以及总金额
时间: 2024-06-08 18:12:29 浏览: 8
好的,我来给你讲一下如何实现一个简易版购物车计算价格。
首先,我们需要一个包含商品列表项的父元素,比如一个 `ul` 元素,每个列表项包含以下信息:
- 商品名称
- 商品单价
- 商品数量
- 商品小计
- 增加商品数量的按钮
- 减少商品数量的按钮
我们可以通过事件委托的方式,将点击事件绑定在父元素上,然后通过判断点击的目标元素是否为增减商品数量的按钮,来更新商品数量和小计。最后,我们再计算总的商品件数和金额,并显示在页面上。
下面是一个简单的实现代码:
HTML:
```
<ul id="cart">
<li>
<span class="name">商品1</span>
<span class="price">100</span>
<span class="quantity">1</span>
<span class="subtotal">100</span>
<button class="increase">+</button>
<button class="decrease">-</button>
</li>
<li>
<span class="name">商品2</span>
<span class="price">200</span>
<span class="quantity">2</span>
<span class="subtotal">400</span>
<button class="increase">+</button>
<button class="decrease">-</button>
</li>
</ul>
<div>
<span>总件数:</span>
<span id="total-quantity">3</span>
<span>总金额:</span>
<span id="total-price">500</span>
</div>
```
JavaScript:
```
const cart = document.getElementById('cart');
const totalQuantity = document.getElementById('total-quantity');
const totalPrice = document.getElementById('total-price');
let quantity = 0;
let price = 0;
cart.addEventListener('click', e => {
if (e.target.classList.contains('increase')) {
const listItem = e.target.parentNode;
const itemQuantity = listItem.querySelector('.quantity');
const itemPrice = listItem.querySelector('.price');
const itemSubtotal = listItem.querySelector('.subtotal');
let quantity = parseInt(itemQuantity.innerText);
let price = parseInt(itemPrice.innerText);
quantity++;
itemQuantity.innerText = quantity;
itemSubtotal.innerText = quantity * price;
} else if (e.target.classList.contains('decrease')) {
const listItem = e.target.parentNode;
const itemQuantity = listItem.querySelector('.quantity');
const itemPrice = listItem.querySelector('.price');
const itemSubtotal = listItem.querySelector('.subtotal');
let quantity = parseInt(itemQuantity.innerText);
let price = parseInt(itemPrice.innerText);
if (quantity > 0) {
quantity--;
itemQuantity.innerText = quantity;
itemSubtotal.innerText = quantity * price;
}
}
// 计算总件数和总金额
quantity = 0;
price = 0;
const items = cart.querySelectorAll('li');
items.forEach(item => {
quantity += parseInt(item.querySelector('.quantity').innerText);
price += parseInt(item.querySelector('.subtotal').innerText);
});
totalQuantity.innerText = quantity;
totalPrice.innerText = price;
});
```
这样,我们就实现了一个简单的购物车计算价格功能。当用户点击增减商品数量的按钮时,会自动更新商品数量和小计,并计算总的商品件数和金额。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![txt](https://img-home.csdnimg.cn/images/20210720083642.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)