Question

我正在使用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();
});

我想知道的是：还有其他方法，所以当我按下$units按钮时，我可以使用jQuery来操纵更多的$grade和Add Course值吗？目前，它仅适用于第一组输入值。

Answer 1

添加新行后，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);

Answer 2

我注意到代码的开头是： 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()
}

Answer 3

由于输入是动态添加的，因此您需要将事件绑定到最近的静态父级，例如.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

如何使用jquery添加输入的val？

3 个答案: