Question

这是一个codepen jQuery。

var $oBox = $('.outer-box');
var $gpa = $('#gpa');
var $result = $('.result').hide();

$('.btn').click(function() {
  $('.block').last().clone().children().val("").parent().appendTo($('.inner-box'));
});

$oBox.on('keyup', '.points', function() {
  $gpa.text(getTotal());
});

$oBox.on("change", ".total-points", function() {
  $gpa.text(getTotal());
  $result.is(":hidden") && $result.show();
});

function getTotal() {
  var gradeTotal = 0;
  var sum = 0;
  $(".points").each(function() {
    var $this = $(this);
    if(!isNaN($this.val()) && !isNaN($this.parent().find('.total-points').val())) {
      sum += parseFloat($this.val() || 0) * parseFloat($this.parent().find('.total-points').val() || 0);
      gradeTotal += parseFloat($this.val() || 0)
    }
  });
  return  (sum/gradeTotal).toFixed(2);
}

$(".btn").on("click", function () {
  
    $('html, body').animate({scrollTop:$(document).height()}, 'slow');
    return false;
});

body {
  background-color: #A00000;
  background-size: cover;
  margin: 0;
  padding: 0;
}

.title {
  font-size: 5rem;
  text-align: center;
}

.outer-box {
  border: 3px solid black;
  height: true;
  width: 75%;
  padding: 10px;
  margin: 10px auto 10px auto;
  border-radius: 10px;
  background-color: white;
}

.spacer {
  margin-bottom: 20px;
}

#class-name {
  margin-left: 5px;
  font-size: 2rem;
  font-weight: bold;
}

.assignment {
  width: 150px;
  height: 35px;
  padding: 5px;
  margin:10px;
  font-size: 20px;
  border: 1px solid gray;
  border-radius: 5px;
}

.points {
  border: 1px solid gray;
  border-radius: 5px;
  width: 100px;
  margin: 10px;
  height: 35px;
  padding: 5px;
}

.block {
  margin-bottom: 20px;
}

.btn {
  border: 2px solid black;
  font-weight: bold;
  width: 150px;
  text-align: center;
  margin: 10px;
  padding: 5px;
}

.result {
  width: 200px;
  height: 100px;
  border: 2px solid black;
  border-radius: 5px;
  text-align: center;
  margin: 20px auto 20px auto;
}

#gpa {
  font-size: 4rem;
  color: black;
  font-weight: bold;
}

.total-points {
  border: 1px solid gray;
  border-radius: 5px;
  width: 100px;
  margin: 10px;
  height: 35px;
  padding: 5px;
}
#fixedbutton {
    position: fixed;
    bottom: 0px;
    right: 0px; 
  background-color: white;
  color: white;
  padding: 10px;
  z-index: 1;
  border: solid 5px #00338A;
  border-radius: 5px;
  margin: 10px;
}
#fixedbutton img {
  height: 30px;
  width: 30px;
}

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
</head>
<body>
  <div class='outer-box'>
    <div class='inner-box'>
      <form class='block'>
        <input type="text" class='assignment' placeholder="Assignment">
        </br>
        <input type="number" class='points' placeholder="Points">
      </br>
        <input type="number" class='total-points' placeholder="Total Points">
      </form>
    </div>

    <div class='btn btn-default'>Add Grade</div>
    <div class='result'>
      <h3 id="gpa">GPA</h3>
    </div>
  </div>
  <div class='spacer'></div>

</body>

如何操作jQuery中的代码并将所获得的总点数相加，然后除以两个输入中的总点数。然后显示结果？

Answer 1

目前您的代码是

function getTotal() {
  var gradeTotal = 0;
  var sum = 0;
  $(".points").each(function() {
    var $this = $(this);
    if(!isNaN($this.val()) && !isNaN($this.parent().find('.total-points').val())) {
      sum += parseFloat($this.val() || 0) * parseFloat($this.parent().find('.total-points').val() || 0);
      gradeTotal += parseFloat($this.val() || 0)
    }
  });
  return  (sum/gradeTotal).toFixed(2);
}

因此，如果我为'积分'输入10，为'总积分'输入20，则执行此计算：

总和+ = 10 * 20

gradeTotal + = 10

返回200/10（= 20）

如果我理解正确，你实际上想要10/20 = .5

这很容易解决。只需改变这两行。

  sum += parseFloat($this.val() || 0);
  gradeTotal += parseFloat($this.parent().find('.total-points').val() || 0);

这会在您继续添加更多成绩时保持累积分数。

操纵公式计算总点数

1 个答案: