本文于 2024年1月24日 10:17 更新，注意查看最新内容
要实现jQuery中的商品加入购物车效果，您可以按照以下步骤进行操作：
HTML结构： 在您的HTML文件中创建一个购物车区域和商品列表。每个商品都应该有一个“添加到购物车”的按钮。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Shopping Cart</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div id="cart"> <h2>Shopping Cart</h2> <ul id="cart-items"></ul> </div> <div id="products"> <h2>Products</h2> <ul> <li data-id="1" data-name="Product 1" data-price="20"> <span>Product 1 - $20</span> <button class="add-to-cart">Add to Cart</button> </li> <li data-id="2" data-name="Product 2" data-price="30"> <span>Product 2 - $30</span> <button class="add-to-cart">Add to Cart</button> </li> <!-- Add more products as needed --> </ul> </div> <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script> <script src="script.js"></script> </body> </html>
CSS样式： 创建一个样式文件（styles.css）以美化您的购物车和产品列表。
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
#cart, #products {
float: left;
width: 45%;
margin-right: 5%;
}
#cart {
background: #f9f9f9;
padding: 15px;
}
#cart-items {
list-style: none;
padding: 0;
}
#cart-items li {
margin-bottom: 10px;
}
#products ul {
list-style: none;
padding: 0;
}
#products li {
margin-bottom: 20px;
}
JavaScript脚本： 创建一个脚本文件（script.js）以处理购物车的逻辑。
$(document).ready(function() {
// 商品添加到购物车
$('.add-to-cart').on('click', function() {
var product = $(this).closest('li');
addToCart(product);
});
// 添加到购物车的函数
function addToCart(product) {
var productId = product.data('id');
var productName = product.data('name');
var productPrice = product.data('price');
var cartItem = $('<li>').html(productName + ' - $' + productPrice);
$('#cart-items').append(cartItem);
}
});
这个例子中，当用户点击“Add to Cart”按钮时，商品信息会被添加到购物车中。您可以根据需要进行调整和扩展。确保在您的项目中引入了jQuery库，以便脚本能够正常工作。
Comments | NOTHING