我试图从按钮中获得每个输入的总价值，并且所有输入的总价值不能超过4。然而，我只能让每个输入不超过4并且每个输入的总和只能是总和而不是所有输入的总和。//如果我的问题/解释让你困惑了，我很抱歉，因为我真的不知道如何用语言表达。但是代码的目标是不让客人总数超过4个。
<!DOCTYPE HTML>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid Guests-S">
<div id="form">
<div class="G-title"><b>Guests</b> (Max. 4 pax for the selected facilities)</div>
<form>
<div class="G-box">
<label for="Staff" class="Guests">Park Company's Staff</label>
<div class="dec button">-</div>
<input type="text" name="qty" id="1" readonly="" value="0" placeholder="0" class="input-filed"><br>
<div class="inc button">+</div>
</div>
<div class="G-box">
<label for="Staff" class="Guests">Guest - Adults</label>
<div class="dec button">-</div>
<input type="text" name="qty" id="2" readonly="" value="0" placeholder="0" class="input-filed"><br>
<div class="inc button">+</div>
</div>
<div class="G-box">
<label for="Staff" class="Guests">Guest - Children</label>
<div class="dec button">-</div>
<input type="text" name="qty" id="3" readonly="" value="0" placeholder="0" class="input-filed"><br>
<div class="inc button">+</div>
</div>
<div class="G-box">
<label for="Staff" class="Guests">Total</label>
<input type="text" id="total" value="0" disabled=""><br>
</div>
<script>
$(document).ready(function () {
$('.dec').click(function (e) {
var form = $(this).parents('.G-box');
var inputfiled = form.find('.input-filed').val();
console.log(inputfiled);
var total = parseInt(inputfiled);
total -= 1;
if (total < 0) {
total = 0;
}
form.find('.input-filed').val(total);
$('#total').val(total);
});
$('.inc').click(function (e) {
var form = $(this).parents('.G-box');
var inputfiled = form.find('.input-filed').val();
console.log(inputfiled);
var total = parseInt(inputfiled);
total += 1;
if (total > 4) {
total = 4;
}
console.log(total);
form.find('.input-filed').val(total);
$('#total').val(total);
});
});
</script>
</form>
</div>
</div>
</body>
使用一个简单的函数来遍历input和name=qty
$(document).ready(function () {
$('.dec').click(function (e) {
var form = $(this).parents('.G-box');
var inputfiled = form.find('.input-filed').val();
//console.log(inputfiled);
//console.log(total);
var qty = parseInt(inputfiled);
qty = (qty <= 0) ? 0 : (qty-1); // short hand if statement
form.find('.input-filed').val(qty);
$('#total').val(get_total_qty()); // <<< Here
//}
});
$('.inc').click(function (e) {
var form = $(this).parents('.G-box');
var inputfiled = form.find('.input-filed').val();
//console.log(inputfiled);
let total = get_total_qty();
//console.log(total);
if(total < 4){
var qty = parseInt(inputfiled);
qty = (qty >= 4) ? 4 : qty+1; // short hand if statement
form.find('.input-filed').val(qty);
$('#total').val(get_total_qty()); // <<< Here
}
});
});
// function to loop through the inputs qty and get total
function get_total_qty(){
let total = 0;
$("input[name='qty']").each(function(){
total += +this.value
});
return total <= 4 ? total : 4;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="form">
<div class="G-title"><b>Guests</b> (Max. 4 pax for the selected facilities)</div>
<form>
<div class="G-box">
<label for="Staff" class="Guests">Park Company's Staff</label>
<div class="dec button">-</div>
<input type="text" name="qty" id="1" readonly="" value="0" placeholder="0" class="input-filed"><br>
<div class="inc button">+</div>
</div>
<div class="G-box">
<label for="Staff" class="Guests">Guest - Adults</label>
<div class="dec button">-</div>
<input type="text" name="qty" id="2" readonly="" value="0" placeholder="0" class="input-filed"><br>
<div class="inc button">+</div>
</div>
<div class="G-box">
<label for="Staff" class="Guests">Guest - Children</label>
<div class="dec button">-</div>
<input type="text" name="qty" id="3" readonly="" value="0" placeholder="0" class="input-filed"><br>
<div class="inc button">+</div>
</div>
<div class="G-box">
<label for="Staff" class="Guests">Total</label>
<input type="text" id="total" value="0" disabled=""><br>
</div>
<script>
</script>
</form>
</div>
</div>