加减多个文本字段
加减多个文本字段
提问于 2013-08-30 20:24:21
我有一个表，在该表中，我试图使用jQuery在keydown或blur上添加和减去多个文本字段。虽然我可以成功地添加，但我得到的减法结果都是错误的。
HTML：
<input type="text" class="add" />
<input type="text" class="add" />
<input type="text" class="sub" />
<input type="text" class="sub" />
<label id="total"></label>联署材料：
$('.add').blur(function () {
var sum = 0;
$('.add').each(function () {
if (!isNaN(this.value) && this.value.length != 0) {
sum += parseFloat(this.value);
}
});
$('#total').text(sum.toFixed(2));
});
$('.sub').blur(function () {
var sum = 0;
var val = $('#total').text();
$('.sub').each(function () {
if (!isNaN(this.value) && this.value.length != 0) {
sum -= parseFloat(this.value);
}
});
val = parseFloat(sum) - parseFloat(val);
$('#total').text(val);
});小提琴
回答 6
Stack Overflow用户
回答已采纳
发布于 2013-08-30 20:36:57
更改：
val = parseFloat(sum) - parseFloat(val);至：
val = parseFloat(val) + parseFloat(sum);在.sub处理程序中，sum是负的，因此您需要将它添加到val中才能减去。
小提琴
Stack Overflow用户
发布于 2013-08-30 20:36:40
我建议下一个解决办法：
HTML:
<input type="text" class="calc" data-action="add" />
<input type="text" class="calc" data-action="add" />
<input type="text" class="calc" data-action="sub" />
<input type="text" class="calc" data-action="sub" />
<label id="total"></label>JS
$(document.body).on('blur', '.calc', function() {
var result = 0;
$('.calc').each(function() {
var $input = $(this),
value = parseFloat($input.val());
if (isNaN(value)) {
return;
}
var action = $input.data('action') == 'add' ? 1 : -1;
result += value * action;
});
$('#total').text(result.toFixed(2));
});试试看
Stack Overflow用户
发布于 2013-08-30 20:41:13
根据您的小提琴，您可以简单地做以下工作：
$(function() {
$(document).on('blur change keyup', '.add, .sub', function(e) {
var sum = 0;
$('.add, .sub').each(function(i) {
if (!isNaN(this.value) && this.value.length != 0) {
if ($(this).hasClass('add')) {
sum += parseFloat(this.value);
}
else {
sum -= parseFloat(this.value);
}
}
});
$('#total').text(sum.toFixed(2));
})
})
示例
FuN vERsiON！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18540937
复制相关文章
相似问题
腾讯云开发者
