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

Question

我有这个现在有效的脚本，我想将贷款付款和总贷款价值相加，但将这两种类型分开。

我觉得我没有充分发挥 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>

Answer 1

如果我是你，我会为此使用 javascript，但你也可以使用 jQuery 来做到这一点。 您想要做的是将所有重复的代码放入一个函数中：

 $(document).ready(function() { /* get total amount */ function addAmounts(els) { let result = 0; els.each((idx, el) => { result += parseInt($(el).val()) }) return result.toFixed(2) } $('#monthAmt').text(addAmounts($('input.monthAmt'))); $('#loanAmt').text(addAmounts($('input.loanAmt'))); });

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

更新：

使用纯 javascript 和稍微简化的代码：

 function addAmounts(selector){ return [...document.querySelectorAll(selector)].reduce((acc,cur) => acc += parseInt(cur.value), 0).toFixed(2) } document.getElementById("totalMonthlyAmt").innerHTML = "Total Monthly payments: " + addAmounts(".monthAmt") document.getElementById("totalLoanAmt").innerHTML = "Total Loan Amount: " + addAmounts(".loanAmt")

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

Answer 2

考虑到您正在循环两种截然不同的数据（每月与总计），您的代码对我来说似乎并不重复。

这使得什么是重复的，可以接受。

但是如果你真的想进一步减少代码，你可以这样做：

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());
}