Javascript 添加变量并更改事件

Question

我有以下代码

$(document).ready(function () {
    $('#big_1').change(function () {
        var bigAmt = document.getElementById("big_1").value
            + document.getElementById("big_2").value
            + document.getElementById("big_3").value
            + document.getElementById("big_4").value
            + document.getElementById("big_5").value
            + document.getElementById("big_6").value
            + document.getElementById("big_7").value 
            + document.getElementById("big_8").value
            + document.getElementById("big_9").value
            + document.getElementById("big_10").value;

        var elem = document.getElementById("totalBig");
        elem.value = bigAmt;
    });
});

我实际上想在“big_1 到 big_10”的输入文本值更改时将 big_1 的值添加到 big_10，或者 1 个文本字段更改其值，这应该被调用。

到目前为止，我只在 big_1 更改事件上运行。

通过这种方式添加，我遇到了 javascript 错误，我认为我添加它们的方式相当困惑。

我应该如何更改我的代码以便我可以总结

big_1 到 big_10 文本字段值，并且在将 big_1 更改为 big_10(其中任何一个)时，它将调用此函数并将 span id="totalBig"更改为其总和的值(big_1 添加到 big_10)

下面是我编辑的额外代码:

<input type="number" data-bv-digits-message="true" data-bv-threshold="1" min="0" class="form-control" name="big_1" id="big_1" size="6">

<input type="number" data-bv-digits-message="true" data-bv-threshold="1" min="0" class="form-control" name="big_2" id="big_2" size="6">


all the way until big_10

我想改变任何这个big_Identifier(1-10)的值，它会将其总结并改变我的

<div class="well">
Total Big: <span id="totalbig">0</span> &nbsp;&nbsp;&nbsp;&nbsp;</span> 
</div>

我尝试过

<script type="text/javascript">
$(document).ready(function() {
$('#html5Form').bootstrapValidator();
    $('.big').change(function() { 
        var bigAmt = "";

        $('.big').each(function () {
            bigAmt += $(this).val();    
        })

        var elem = document.getElementById("totalBig");
alert(bigAmt);
        elem.value = bigAmt;
    });
});
</script>

当任何 big_ 值发生更改时，它不会运行任何警报。

Answer 1

如果加上big就更好了给每个人上课<input id="big_NUMBER"> 。那么你可以这样做:

$(document).ready(function() {
    $('.big').change(function() { 
        var bigAmt = 0;

        $('.big').each(function () {
            bigAmt += Number($(this).val());    
        })

        $("#totalBig").val(bigAmt);
    });
});

这比您所拥有的更清晰、更容易理解。

为了使其正常工作，您需要向所有输入添加一个类:

<input type="number" data-bv-digits-message="true" data-bv-threshold="1" min="0" class="form-control big" name="big_2" id="big_2" size="6"><!-- Notice the big class-->

这是对所有输入进行分组的最佳方式。它们都是相关的，所以它们应该共享一个类。您不应该为如此相似的功能调用多个 id。