希望在商品数量到10的时候input里面的value能显示10而不是1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
.slider {
position: fixed;
top: 0;
bottom: 0;
right: -100%;
width: 80%;
max-width: 400px;
background-color: #fff;
padding: 20px;
z-index: 999;
transition: right 0.3s ease;
}
.slider.active {
right: 0;
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 998;
display: none;
}
.overlay.active {
display: block;
}
</style>
<title>Slider Sidebar</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12 text-center mt-5">
<button id="cartBtn" class="btn btn-primary">Open Cart</button>
</div>
</div>
</div>
<div id="slider" class="slider">
<button id="closeBtn" class="btn btn-secondary">Close</button>
<h2 class="text-center mt-3">Your Cart</h2>
<ul id="cartItems" class="list-group">
<li class="list-group-item">Item 1 - $10
<div class="input-group" style="width: 100px; float: right;">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary" type="button" onclick="decreaseQuantity(this)">-</button>
</div>
<input type="text" class="form-control" value="1" style="text-align: center;" readonly>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" onclick="increaseQuantity(this)">+</button>
</div>
</div>
</li>
<li class="list-group-item">Item 2 - $15
<div class="input-group" style="width: 100px; float: right;">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary" type="button" onclick="decreaseQuantity(this)">-</button>
</div>
<input type="text" class="form-control" value="1" style="text-align: center;" readonly>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" onclick="increaseQuantity(this)">+</button>
</div>
</div>
</li>
<li class="list-group-item">Item 3 - $15
<div class="input-group" style="width: 100px; float: right;">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary" type="button" onclick="decreaseQuantity(this)">-</button>
</div>
<input type="text" class="form-control" value="1" style="text-align: center;" readonly>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" onclick="increaseQuantity(this)">+</button>
</div>
</div>
</li>
</ul>
<div id="totalPrice" class="text-center mt-3"></div>
<button id="payBtn" class="btn btn-success btn-block mt-3">Pay Now</button>
</div>
<div class="overlay" id="overlay"></div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$('#cartBtn').click(function() {
$('#slider').addClass('active');
$('#overlay').addClass('active');
});
$('#closeBtn').click(function() {
$('#slider').removeClass('active');
$('#overlay').removeClass('active');
});
$('#overlay').click(function() {
$('#slider').removeClass('active');
$('#overlay').removeClass('active');
});
function calculateTotalPrice() {
let totalPrice = 0;
$('#cartItems li').each(function() {
let itemText = $(this).text();
let price = parseFloat(itemText.split('-')[1].trim().replace('$', ''));
let quantity = parseInt($(this).find('input').val());
totalPrice += price * quantity;
});
$('#totalPrice').text(`Total: $${totalPrice.toFixed(2)}`);
}
window.increaseQuantity = function(element) {
let input = $(element).parent().parent().find('input');
let quantity = parseInt(input.val());
if (quantity < 10) {
input.val(quantity + 1);
calculateTotalPrice();
}
}
window.decreaseQuantity = function(element) {
let input = $(element).parent().parent().find('input');
let quantity = parseInt(input.val());
if (quantity > 1) {
input.val(quantity - 1);
calculateTotalPrice();
}
}
$('#payBtn').click(function() {
alert('恭喜你支付成功！');
});
calculateTotalPrice();
$(window).on('resize', function() {
if ($(window).width() > 576) {
$('.slider.active').css('height', '100vh');
} else {
$('.slider.active').css('height', '100%');
}
});
});
</script>
</body>
</html>
