javascript - 从输入中获取多个值并根据其类名添加它们

我有一个目前可以使用的脚本，在这里我想将贷款还款和总贷款额加在一起，但将两种类型分开。

我觉得我没有充分发挥jQuery的潜力，因为我要复制和粘贴相同的东西两次，并用相似的代码重复自我。

我在这里想念什么吗？是否有更好的方法从多个输入字段中获取选定的值？

更新
我犯了一个错误，将id的值与<input />的值相同。因此，我更新了代码以使其类似。

$(document).ready(function() {
  getTotalAmount();
});

function getTotalAmount() {
  var monthTotal = 0.00;
  var total = 0.00;

  $('input.monthAmt').each(function() {
    monthTotal += parseFloat($(this).val());

    console.log("These is something here: " + monthTotal + " ");
  });

  $('input.loanAmt').each(function() {
    total += parseFloat($(this).val());

    console.log("These is something here: " + total + " ");
  });

  $('#monthAmt').text(monthTotal.toFixed(2).toString());
  $('#loanAmt').text(total.toFixed(2).toString());
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Loan 1:
<label>Monthly Amount: </label>
<input class="monthAmt" value="1" />
<label>Loan Amount: </label>
<input class="loanAmt" value="2" />
</br>
</br>
Loan 2:
<label>Loan Amount: </label>
<input class="monthAmt" value="3" />
<label>Loan Amount: </label>
<input class="loanAmt" value="4" />
</br>
</br>
<div id="totalMonthlyAmt">Total Monthly payments: $<span id="moAmt"></span></div>
<div id="totalLoanAmt">Total Loan Amount: $<span id="lnAmt"></span></div>

最佳答案

鉴于您要遍历两种截然不同的数据（每月与总计），因此您的代码对我而言似乎没有那么重复。

这使得几乎没有重复的东西可以接受。

但是，如果您真的想进一步削减代码，则可以执行以下操作：

function getTotalAmount() {
    let totals = {loanAmt: 0, monthAmt: 0};
    $('.monthAmt, .loanAmt').each(function() {
        totals[$(this)[0].className] += parseFloat($(this).val());
    });
    for (type in totals)
        $('#'+type).text(totals[type].toFixed(2).toString());
}