用于对具有2个类的文本框求和的jquery函数
用于对具有2个类的文本框求和的jquery函数
提问于 2016-02-28 23:03:55
我正在尝试使用jquery添加一组文本框。每个textbox都有一个使用bootstrap设置样式的类(class1)。我添加了一个额外的类(class2)来运行jquery函数。下面是两个文本框外观的示例。
<input type="text" class="class1 class2" name="textbox1" id="textbox1 />
<input type="test" class="class1 class2" name="textbox2" id="textbox2 />这是我的jquery函数。GrandTotal是保存和的文本框的id。
$('.class2').keyup(function () {
var sum = 0;
$('.class2').each(function() {
sum += Number($(this).val());
});
$('#GrandTotal').val(sum);
});这不管用。我在#GrandTotal中没有得到任何结果。谁能告诉我我哪里做错了？提前感谢您的帮助。
cdr6800
回答 3
Stack Overflow用户
发布于 2016-02-28 23:16:35
您必须验证输入是否为数字，否则将得到NaN (而不是数字)。JavaScript具有isNaN()功能，用于检查给定的输入是否为NaN。
$('input.class2').keyup(function() {
var sum = 0;
$('input.class2').each(function() {
var value = Number($(this).val());
if(!isNaN(value)) {
sum += value;
}
});
$('#GrandTotal').val(sum);
});Stack Overflow用户
发布于 2016-02-28 23:18:14
您的HTML无效。
<input type="test" class="class1 class2" name="textbox2" id="textbox2 />测试type= "text“而不是”►“
您没有用双引号结束id。，►
$(document).ready(function() {
$('.class2').keyup(function() {
var sum = 0;
$('.class2').each(function() {
sum += Number($(this).val());
});
$('#GrandTotal').val(sum);
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="class1 class2" name="textbox1" id="textbox1">
<input type=" text " class="class1 class2 " name="textbox2 " id="textbox2">
<input type=" text " name="textbox3 " id="GrandTotal">
Stack Overflow用户
发布于 2016-02-28 23:28:47
在普通的JavaScript中，即使没有jQuery也可以做到这一点。
var GrandTotal = document.getElementById("GrandTotal");
var values = [0, 0];
function updateTotal(element, index) {
element.onkeyup = function() {
if (!isNaN(element.value)) {
values[index] = parseInt(element.value || 0);
}
GrandTotal.textContent = values[0] + values[1];
}
}
Array.prototype.forEach.call(document.getElementsByClassName('class2'), updateTotal);<input type="text" class="class1 class2" name="textbox1" id="textbox1" />
<input type="test" class="class1 class2" name="textbox2" id="textbox2" />
<p id="GrandTotal"></p>
Array.from(document.getElementsByClassName('class2')).forEach(updateTotal);为您提供了一个具有class2类的元素数组。对于每一个them.updateTotal，forEach都调用updateTotal，element是已经改变的元素，index表示它是你的第一个还是第二个them.updateTotal，我们会检查给定的<input/>是否是非NaN值。如果是，我们将数值(或0)放在values数组中的适当位置。然后我们更新#GrandTotal的文本。
这样，#GrandTotal的值将始终随着<input/>的每次更改而更新，除非它将更改为无效值，在这种情况下，它将保存它的最后一个有效值。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35684119
复制相关文章
相似问题
腾讯云开发者
