html+css+jquery实现简单的购物车功能，CSS复合选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简易购物车示例</title>
<style>
/* 复合选择器选中所有带有.item类的元素，并且它们的父元素具有.cart类 */
.cart .item {
margin-bottom: 10px;
}
.cart .item .quantity {
width: 50px;
text-align: center;
}
</style>
</head>
<body>
<div class="cart">
<div class="item">
<span class="quantity">2</span> 件物品
</div>
<div class="item">
<span class="quantity">1</span> 件物品
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// 更新购物车中物品的总数量
function updateCartQuantity() {
var totalQuantity = 0;
$('.cart .item .quantity').each(function() {
totalQuantity += parseInt($(this).text(), 10);
});
$('#totalQuantity').text(totalQuantity);
}
// 页面加载完成后绑定更新方法
$(document).ready(function() {
updateCartQuantity();
});
</script>
<div>总共有 <span id="totalQuantity">0</span> 件物品。</div>
</body>
</html>这个简化的购物车示例展示了如何使用jQuery遍历特定元素，并执行一些操作（例如更新总数量）。这里使用了.each()方法来遍历所有的.quantity元素，并将它们的数量累加起来。这个例子教会用户如何在实践中使用复合选择器来选择特定的DOM元素，并通过jQuery操作它们。
评论已关闭