用jquery写一个购物界面
时间: 2023-10-27 21:04:32 浏览: 39
以下是一个简单的购物界面的HTML和jQuery代码示例:
HTML代码:
```html
<div id="cart">
<h2>购物车</h2>
<ul id="cart-items">
<!-- 购物车列表 -->
</ul>
<div id="cart-total">
总价: <span id="total-price">0</span> 元
</div>
</div>
<div id="items">
<h2>商品列表</h2>
<ul>
<li data-name="商品1" data-price="100">商品1 - 100元</li>
<li data-name="商品2" data-price="200">商品2 - 200元</li>
<li data-name="商品3" data-price="300">商品3 - 300元</li>
</ul>
</div>
```
jQuery代码:
```javascript
$(document).ready(function() {
// 初始化购物车
var cartItems = [];
// 添加商品到购物车
$('#items li').click(function() {
var itemName = $(this).data('name');
var itemPrice = Number($(this).data('price'));
cartItems.push({
name: itemName,
price: itemPrice
});
updateCart();
});
// 更新购物车
function updateCart() {
var totalPrice = 0;
$('#cart-items').empty();
for (var i = 0; i < cartItems.length; i++) {
var itemName = cartItems[i].name;
var itemPrice = cartItems[i].price;
var $cartItem = $('<li>' + itemName + ' - ' + itemPrice + '元</li>');
$('#cart-items').append($cartItem);
totalPrice += itemPrice;
}
$('#total-price').text(totalPrice);
}
});
```
简要说明:
1. 首先定义了一个购物车界面和商品列表界面的HTML代码。
2. 在jQuery代码中,通过点击商品列表中的商品,将商品名称和价格添加到购物车数组中并调用updateCart函数更新购物车界面。
3. 在updateCart函数中,首先清空购物车列表,然后通过遍历购物车数组,将每个商品名称和价格添加到购物车列表中,并计算总价。