如何使用jquery计算输入量？
如何使用jquery计算输入量？
提问于 2015-10-06 11:01:37
我在研究GPA计算器，但我遇到了障碍。
下面是计算器的样子：http://codepen.io/m6cheung/pen/KdWGxa。
以下是它的JS部分：
var $units = $('.units');
var $grade = $('.grade-select');
var $gpa = $('#gpa');
var sum = 0;
$('.btn').click(function() {
$('.block').last().clone().children().val("").parent().appendTo($('.inner-box'));
});
$('.result').hide();
$units.keyup(function() {
$gpa.text((($grade.val() * $(this).val()) / $(this).val()).toFixed(2));
});
$grade.change(function() {
$gpa.text((($units.val() * $(this).val()) / $units.val()).toFixed(2));
$('.result').show();
});我想知道的是:还有其他方法吗?所以当我按下jQuery按钮时，我可以使用$units和$grade进一步操作Add Course值。目前，它只适用于第一组输入值。
回答 3
Stack Overflow用户
回答已采纳
发布于 2015-10-06 11:53:07
由于输入是动态添加的，所以需要将事件绑定到最近的静态父级，例如.outer-box。由于事件冒泡，将其绑定到document是糟糕的/代价高昂的。添加输入就像编写一个在keyup和change上调用的函数一样容易，这也消除了代码重复。
var $oBox = $('.outer-box'),
$gpa = $('#gpa'),
$result = $('.result').hide();
$('.btn').click(function() {
$('.block').last().clone().children().val("").parent().appendTo($('.inner-box'));
});
$oBox.on("keyup", ".units", function() {
$gpa.text(getTotal());
});
$oBox.on("change", ".grade-select", function() {
$gpa.text(getTotal());
//Show $result only if it's hidden
$result.is(":hidden") && $result.show();
});
//The function I stated above
function getTotal() {
var sum = 0;
//Loop thru the units
$('.units').each(function() {
var $this = $(this);
//You must also check if the entered unit is a number
//to avoid operating on non-number inputs
//https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/isNaN
if ( !isNaN($this.val()) ) {
//Input vals are always of type string, so, convert them to numbers
//Multiply the pairs
sum += parseFloat($this.val()||0) * parseFloat($this.parent().find('.grade-select').val()||0);
}
});
//Format the number
return sum.toFixed(2);
}你的updated pen
Stack Overflow用户
发布于 2015-10-06 11:08:47
添加新行后，keyup和change事件不会绑定到它们。
尝试使用：-
$(document).on('keyup','.units', function() {和
$(document).on('change','.grade-select', function() {从注释编辑
要将它们相加，创建一个新函数：
function sumScores(){
var score = 0;
$('.block').each(function(i, element){
var unit = $(element).find('.units').val();
var grade = $(element).find('.grade-select').val();
// do calculation and add to score
});
$gpa.text(score.toFixed(2);
}然后将该函数设置为keyup/change处理程序。
$(document).on('keyup','.units', sumScores);
$(document).on('change','.grade-select', sumScores);Stack Overflow用户
发布于 2015-10-06 11:39:43
我注意到代码的开头是：var $units = $('.units');
你的输入是通过克隆动态生成的。
您的计算只在第一次输入时工作的原因之一是因为$input只指向第一个输入，与$grade一样。
也许您期望$input在克隆其他输入时会自动接收它们。情况并非如此。它不像CSS规则那样工作。您需要像这样为每个克隆重新执行行：
$('.btn').click(function() {
$('.block').last().clone().children().val("").parent().appendTo($('.inner-box'));
$units = $('.units');
$grade = $('.grade-select');
});要操作所有值，需要循环所有元素，如下所示：
var sum = 0;
for (var n = 0; n < $units.length; n++) {
sum += 1 * $($units[n]).val();//1 * -> is for assurance it adding not concat
//to retreive $grade use $($grade[n]).val()
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32968321
复制相关文章
相似问题
腾讯云开发者
