我有一个预订航类表格，需要输入旅客人数。我创建了 3 个文本框，每个文本框都包含成人、 child 和婴儿的旅客人数，以及一个主文本框来显示其中的最终结果，但它不起作用。
这是我的代码片段:
$(function() {
$(".button-click a").on("click", function() {
var $button = $(this);
var oldValue = $button.closest("ul").prev().val();
if ($button.text() == "+") {
var newVal = parseInt(oldValue) + 1;
} else {
// Don't allow decrementing below zero
if (oldValue > 0) {
var newVal = parseInt(oldValue - 1);
} else {
newVal = 0;
}
}
$button.closest("ul").prev().val(newVal);
var total_value = 0;
$(".cat_textbox").each(function() {
total_value += parseInt($(this).val());
});
$(".main").val(total_value);
})
});<html>
<head>
<title>Input Number Incrementer</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<label>
Count all1 Traveller(s)
<input type="text" class="main" value="0" placeholder="" />
</label>
<br/>
<br/>
<label>
Adults
<ul class="button-group button-click">
<li><a href="#" class="small button secondary"><i class="fa fa-plus"><span class="hide">+</span></i></a>
</li>
<input type="text" class="cat_textbox" id="CAT_Custom_410672" name="CAT_Custom_410672" maxlength="4000" value="0" />
<li><a href="#" class="small button secondary"><i class="fa fa-minus"><span class="hide">-</span></i></a>
</li>
</ul>
</label>
<label>
Children
<ul class="button-group button-click">
<li><a href="#" class="small button secondary"><i class="fa fa-plus"><span class="hide">+</span></i></a>
</li>
<input type="text" class="cat_textbox" id="CAT_Custom_410672" name="CAT_Custom_410672" maxlength="4000" value="0" />
<li><a href="#" class="small button secondary"><i class="fa fa-minus"><span class="hide">-</span></i></a>
</li>
</ul>
</label>
<label>
Infants
<ul class="button-group button-click">
<li><a href="#" class="small button secondary"><i class="fa fa-plus"><span class="hide">+</span></i></a>
</li>
<input type="text" class="cat_textbox" id="CAT_Custom_410672" name="CAT_Custom_410672" maxlength="4000" value="0" />
<li><a href="#" class="small button secondary"><i class="fa fa-minus"><span class="hide">-</span></i></a>
</li>
</ul>
</label>
</body>
</html>最佳答案
您可以为 + 和 - 设置 2 个不同的处理程序，并使用 this 搜索输入
$(function() {
registerEvents();
});
function registerEvents(){
$('.button-group .fa-plus').on('click', function(){
var input = $(this).closest('li').next()
input.val(+input.val() + 1);
updateTravellerCount();
return false;
})
$('.button-group .fa-minus').on('click', function(){
var input = $(this).closest('li').prev()
var val = +input.val() > 0 ? +input.val() - 1 : 0
input.val(val);
updateTravellerCount();
return false;
});
}
function updateTravellerCount(){
var total = 0;
$.each($('.button-group input'), function(){
total += +$(this).val();
});
$('.main').val(total)
}<html>
<head>
<title>Input Number Incrementer</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<label>
Count all1 Traveller(s)
<input type="text" class="main" value="0" placeholder="" />
</label>
<br/>
<br/>
<label>
Adults
<ul class="button-group button-click">
<li><a href="#" class="small button secondary"><i class="fa fa-plus"><span class="hide">+</span></i></a>
</li>
<input type="text" class="cat_textbox" id="CAT_Custom_410672" name="CAT_Custom_410672" maxlength="4000" value="0" />
<li><a href="#" class="small button secondary"><i class="fa fa-minus"><span class="hide">-</span></i></a>
</li>
</ul>
</label>
<label>
Children
<ul class="button-group button-click">
<li><a href="#" class="small button secondary"><i class="fa fa-plus"><span class="hide">+</span></i></a>
</li>
<input type="text" class="cat_textbox" id="CAT_Custom_410672" name="CAT_Custom_410672" maxlength="4000" value="0" />
<li><a href="#" class="small button secondary"><i class="fa fa-minus"><span class="hide">-</span></i></a>
</li>
</ul>
</label>
<label>
Infants
<ul class="button-group button-click">
<li><a href="#" class="small button secondary"><i class="fa fa-plus"><span class="hide">+</span></i></a>
</li>
<input type="text" class="cat_textbox" id="CAT_Custom_410672" name="CAT_Custom_410672" maxlength="4000" value="0" />
<li><a href="#" class="small button secondary"><i class="fa fa-minus"><span class="hide">-</span></i></a>
</li>
</ul>
</label>
</body>
</html>我试图让它更加模块化。这不是我最好的尝试，但可能会有所帮助 JSFiddle
关于javascript - 如何减少和增加文本框的值？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40189561/