尝试用js和jQuery实现一个简单的商品购买系统
以下是一个简单的JavaScript和jQuery实现的商品购买系统的示例代码：
HTML部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Shopping Cart</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h2>商品列表</h2>
<ul id="products">
<li data-price="100" data-name="商品A">商品A - ¥100</li>
<li data-price="200" data-name="商品B">商品B - ¥200</li>
<li data-price="300" data-name="商品C">商品C - ¥300</li>
</ul>
<h2>购物车</h2>
<div id="cart">
<!-- 购物车内容将被添加到这里 -->
</div>
<script src="shopping-cart.js"></script>
</body>
</html>JavaScript部分 (shopping-cart.js)：
$(document).ready(function() {
$('#products').on('click', 'li', function() {
var product = $(this);
var name = product.data('name');
var price = product.data('price');
var cartRow = $('<div>').addClass('cart-row').attr('data-name', name);
var productName = $('<span>').text(name);
var productPrice = $('<span>').text('¥' + price);
var removeButton = $('<button>').addClass('remove-btn').text('移除');
cartRow.append(productName, productPrice, removeButton);
$('#cart').append(cartRow);
removeButton.on('click', function() {
cartRow.remove();
});
});
});这段代码实现了一个简单的购物车功能。用户点击产品列表中的商品时，会将该商品添加到购物车中。每行购物车中的商品都有一个移除按钮，点击可以将该商品从购物车中移除。这个例子使用了jQuery来简化DOM操作，并且使用了data-*属性来存储商品的价格和名称。
评论已关闭