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 to big_10”中將big_1的值添加到big_10，或者任一textfield更改其值，都應調用此方法。

截至目前，我僅在big_1 change事件上運行。

通過添加這種方式我收到了一個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。

Answer 2

如果您使用的是jquery，請正確使用它，這將使您的生活更加輕松。

這將完全適合您的情況

$(document).ready(function() {
    $('[id^="big"').change(function(){
        var total = (+$('#totalBig').val());
        var currentVal = (+$(this).val());
        total += currentVal;
        $('#totalBig').val(total)
    })
});

DEMO

Answer 3

您可以按以下方式監視所有輸入類型文本上的更改事件：

$('input:text').change(
function () {
    alert('text changed of any text box.');
    //You can doo your code here.
});

要么...

如果要將監視器添加到任何選定的文本框中，則必須將所有css類添加到那些選定的文本框中，然后通過class監視這些文本框，如下所示：

$('.yourclass').change(
function () {
    alert('text changed of any text box.');
    //You can doo your code here.
});

當您在更改文本后從文本框中失去焦點時，將觸發此更改事件。

但是，如果您想松開焦點（意味着如果您想在鍵入時更新計數），則應使用此答案中所述的keyup事件。

Answer 4

$(document).ready(function() {
    $('#big_1').change(function() {
        var divArray = ["big_1","big_2","big_3","big_4","big_5","big_6","big_7","big_8","big_9","big_9","big_10"];
        var bigAmt = 0;

        for(var i = 0, n = divArray.length;i<n;i++)
        {
            bigAmt += parseInt($("#" + divArray[i]).val(),10);
        }   
        $("#totalBig").val(bigAmt);
    });
});

嘗試上面的方法，它應該可以滿足您的需求。 如果輸入不是“數字”類型，您可能還需要使用parseInt。

*編輯，忘記了ID號。

* edit，刪除了關於考慮使用jquery函數的注釋，因為人們確實很敏感。

Answer 5

將class="bigs"添加到所有輸入，然后嘗試以下操作：

$(document).ready(function () {
    var intTotalBig;
    $('.bigs').change(function () {
        intTotalBig = 0;
        $('.bigs').each(function(){
            $thisVal = $(this).val();
            if ($.isNumeric($thisVal)){
                intTotalBig += parseInt($thisVal, 10);
            }
        });
        $("#totalBig").val(intTotalBig);
    });
});

該代碼檢查每次更改的所有輸入，並對所有具有數字值的輸入求和，並忽略空值或無數字值。

查看JSFiddle演示