基于类名汇总多输入框值的jQuery代码优化咨询

我现有一段可正常运行的jQuery脚本，需求是分别汇总月度还款额（monthAmt类输入框）和贷款总额（loanAmt类输入框），但两类汇总逻辑代码重复，我认为未充分发挥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());
}

HTML结构：

<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>Monthly 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>

嘿，你提的这个问题很典型——重复代码确实是写jQuery时容易踩的坑，完全可以利用它的特性来精简逻辑。我给你两种优化思路，都能解决代码重复的问题，而且更符合jQuery的简洁风格：

思路1：封装通用求和函数 #

把重复的遍历、求和逻辑抽成一个可复用的函数，传入选择器就能返回对应的总和。这种方式可读性强，以后如果要加更多类别的汇总（比如利息总额），只需要调用这个函数就行，扩展性很好。

同时要注意处理非数字/空值的情况：如果用户输入空或者非数字字符，parseFloat会返回NaN，加上|| 0可以确保总和不会出错。另外还要修正原代码中HTML span ID与JS选择器不匹配的问题（原JS用了#monthAmt，但HTML里是#moAmt）。

优化后的代码：

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

// 封装通用求和函数，接收元素选择器参数
function calculateSum(selector) {
    let sum = 0.00;
    $(selector).each(function() {
        // 处理空值或非数字，避免总和变成NaN
        const inputValue = parseFloat($(this).val()) || 0;
        sum += inputValue;
    });
    return sum;
}

function getTotalAmount() {
    // 调用通用函数获取两个总和
    const monthlyTotal = calculateSum('input.monthAmt');
    const loanTotal = calculateSum('input.loanAmt');
    
    // 修正ID匹配问题，更新页面显示
    $('#moAmt').text(monthlyTotal.toFixed(2));
    $('#lnAmt').text(loanTotal.toFixed(2));
}

思路2：利用jQuery的.map() + 数组reduce（更简洁） #

jQuery的.map()方法可以快速把选中元素的属性转换成数组，再结合原生数组的reduce()方法求和，代码更紧凑，不用手动写each循环，充分发挥了jQuery的链式调用特性。

优化后的代码：

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

function getTotalAmount() {
    // 链式调用：map转数字数组 → get转原生数组 → reduce求和
    const monthlyTotal = $('input.monthAmt')
        .map(function() {
            return parseFloat($(this).val()) || 0;
        })
        .get() // 将jQuery对象转换为原生数组
        .reduce((accumulator, currentValue) => accumulator + currentValue, 0);
    
    const loanTotal = $('input.loanAmt')
        .map(function() {
            return parseFloat($(this).val()) || 0;
        })
        .get()
        .reduce((accumulator, currentValue) => accumulator + currentValue, 0);
    
    $('#moAmt').text(monthlyTotal.toFixed(2));
    $('#lnAmt').text(loanTotal.toFixed(2));
}

两种方案对比 #

• 思路1适合逻辑需要扩展的场景（比如以后要加日志、额外校验），可读性更高，新手也容易理解；
• 思路2更简洁，代码量更少，适合逻辑简单的汇总场景，充分利用了jQuery和原生数组的特性。

内容的提问来源于stack exchange，提问作者whisk