javascript - JQuery:将数字从分隔数组相乘，然后得到结果的总和

Question

我有一个页面允许学生计算他们的加权平均值。它的工作原理是学生在两个单独的表单字段中添加他们的成绩，然后他们可以根据需要添加任意多行的表单字段。基本计算是:(ECTS * 成绩) 的总和/(ECTS ) 的总和。

(注意:该页面是丹麦语，所以有些语言不是英语。)

现在我用 PHP 进行计算，它们看起来像这样:

if($_POST['karakter'])
{
$karakter=$_POST['karakter'];
}
if($_POST['ects'])
{
$ects=$_POST['ects'];
$samletects = array_sum($ects);
}
for($i = 0; $i < count($karakter); $i++) {
    $result[] = $karakter[$i] * $ects[$i];
}
    $samletv = array_sum($result);
    $fulderesultat = ($samletv/$samletects);
    $afrundet = round($fulderesultat, 2);
if($_POST['karakter'])
{
echo "<h4>Dit vægtede gennemsnit er:</h4><p class='resultatet'>" . $afrundet . "</p>";
} else {
  echo "<h4>Dit vægtede gennemsnit er:</h4><p class='resultatet'>?</p>";
}

但是我希望能够实时进行计算，这样您就不会在每次进行计算时丢失添加到表格中的成绩。

这个 fiddle 展示了我如何添加表单字段 http://jsfiddle.net/Chrintz/sv513b5r/26/

现在的页面: http://snittet.dk/

我的问题是我如何在 Jquery 而不是 PHP 中进行计算。我已经弄清楚如何获取 ECTS 数组的总和:

http://jsfiddle.net/Chrintz/omccrobs/

但是我不知道该怎么做:(ECTS * 成绩) 的总和

将一个数组的数字与另一个数组的相应数字相乘，然后得到新数组的数字之和。

我基本上需要帮助的是创建两个数组，一个包含成绩，一个包含 ECTS。然后我想乘以相应的值，从而创建第三个数组。然后我想将第三个数组的值相加并将其除以 ects 数组的相加值

Answer 1

这里有许多(客户端)解决方案。例如:将输入元素转换为元素的 Array 并应用 Array.map/Array.reduce 进行计算。

类似于(自动计算值变化):

calculate();

// autocalculate
$('body').on('keyup', 'input', calculate);

function calculate(e) {
  var grades    = $('#grades input').toArray();
  var ects      = $('#ects input').toArray();
  
  // calculate values
  var totalEcts = ects.map( function (ectsInput) {return +ectsInput.value || 0;} )
                      .reduce( function (p, n) {return p + n;}, 0 );
  var meanGrade = grades
                   .map( function (gradeInput) {return +gradeInput.value || 0;} )
                   .reduce( function (p, n) {return p+n;}, 0 ) / grades.length;
  var weighted  = grades
                   .map( 
                    function (gradeInput, i) {
                      return (+gradeInput.value || 0) * (+this[i].value || 0);
                    }, ects)
                   .reduce( function (p, n) {return p + n;}, 0 ) / 
                      (totalEcts > 0 ? totalEcts : 1) // avoid division by zero
  
  // display calculated values
  $('#meanGrade').html( 'mean: ' + meanGrade.toFixed(2) );
  $('#totalECTS').html( 'total: ' + totalEcts );
  $('#weightedMean').html( 'sum(grade * ects) / sum(ects): ' + weighted.toFixed(2));
}

body {font: 12px/15px normal verdana, arial; margin: 2em;}
input {width: 3em; margin-bottom: 0.3em;}
#grades {float:left; margin-right: 3em;}
#meanGrade, #totalECTS, #weightedMean {font-weight: bold; color: green}
#weightedMean {display: inline-block; border-top: 1px dotted #777; margin-top: 0.5em;);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="grades">Grades<br>
    <input type="text" class="karakter input" value="5.4"/><br>
    <input type="text" class="karakter input" value="6.2"/><br>
    <input type="text" class="karakter input" value="7.0"/><br>
    <input type="text" class="karakter input" value="6.9"/><br>
    <input type="text" class="karakter input" value="4.3"/><br>
    <span id="meanGrade"> </span>
</div>
<div id="ects">ECTS<br>
    <input type="text" class="ECTS input" value="5"/><br>
    <input type="text" class="ECTS input" value="10"/><br>
    <input type="text" class="ECTS input" value="5"/><br>
    <input type="text" class="ECTS input" value="5"/><br>
    <input type="text" class="ECTS input" value="15"/><br>
    <span id="totalECTS"> </span>
</div>
<p id="weightedMean"></p>

顺便说一句:我不明白你所说的(ECTS * 成绩)总和 是什么意思。你能详细说明一下吗？我从事教育工作，不知道有任何司法系统会进行这样的计算。