jQuery实现电商网站购物车页面商品数量的增加和减少
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车商品数量增减示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<!-- 购物车商品数量增减的HTML结构 -->
<div id="cart">
<span class="minus-btn">-</span>
<input type="text" value="1" class="quantity-input">
<span class="plus-btn">+</span>
</div>
<script>
// jQuery实现购物车商品数量增减
$(document).ready(function(){
// 增加商品数量
$('.plus-btn').click(function(){
var currentVal = parseInt($('.quantity-input').val());
if (currentVal < 10) { // 假设最多增加到10
$('.quantity-input').val(currentVal + 1);
}
});
// 减少商品数量
$('.minus-btn').click(function(){
var currentVal = parseInt($('.quantity-input').val());
if (currentVal > 1) { // 假设最少减少到1
$('.quantity-input').val(currentVal - 1);
}
});
});
</script>
</body>
</html>这段代码展示了如何使用jQuery来实现一个简单的购物车商品数量的增减功能。用户可以通过点击“+”按钮来增加商品数量，点击“-”按钮来减少商品数量。数量的变化会实时反映在输入框中，同时我们可以设置数量的最大值和最小值以保证购物车的一致性。
评论已关闭