javascript - 入力値の合計

Question

jquery を使用してすべての '.invoice-lines' を反復処理し、'.amount-input' div のすべての値を合計して合計を生成しようとしています。

AJAX は、ユーザーが手動で変更できる「.amount-input」のデフォルト値を動的に生成します。AJAX を使用して新しいデータが入るたびに関数 updateTotal() が呼び出されるように、関数を作成しようとしています。私はこれを達成するのに本当に苦労してきました。助けていただければ幸いです。

JQuery - これまでのところ、これは私の jquery です (疑似コード)

function updateTotal(){
   var total=0;
    for(i=0; i < $('.invoice-line').length; i++){
         if($('.amount-input').eq(i).val() != empty)){
              total += $('.amount-input').eq(i).val();
          }
    }
    $('.total').val("$" + total);
}

マークアップ

<?
    for(i=0; i < 25; i++){
    echo'   <div class="invoice-line">
                <div class="prod-id-cell"><input type="text" class="prod-id-input"></div>

                <div class="amount-cell"><input class="amount-input" type="text" /></div>
            </div>';
    }
?>
    <div class="total">$0.00</div>

score 1 · Accepted Answer

jQuery の選択をキャッシュするようにしてください。そうしないと、1 回ではなく 50 回の DOM トラバーサルを行うことになります。

var total=0, amounts = $('.amount-input'), len = amounts.length;
for(var i=0; i < len; i++){
     total += +amounts[i].value;
}

単項プラス演算子を使用して、セルの値を文字列から数値に変換します。 +""ゼロを返すため、セルが空かどうかを確認する必要はありませんがisNaN、入力を検証するときに確認したい場合があります。

inputまた、要素には val を使用しますがtext、divs またはspans には使用します。

$('.total').text("$" + total);

score 0 · Accepted Answer

純粋な JS の基本的な構文は次のとおりです。

var inputs = document.getElementsByClassName("amount-input");
var total = 0;
inputs.forEach(function (input) {
    total += value;
});

アイデアは、関心のあるすべての入力のコレクションを取得し、外部変数を使用して値を合計するというものです。これを拡張して他の入力を含める場合はdocument.querySelectorAll("")、CSS クエリセレクターを使用してコレクションを取得できます。(これは、jQuery の $("") 選択構文と同じです。)

score 0 · Accepted Answer

このようなものが動作するはずです:

function updateTotal() {
    var total = 0;
    $('.invoice-line').each(function (i, elem) {
        total += parseFloat($(elem).find('.amount-input').val(), 10) || 0;
    });
    $('.total').val("$" + total);
}

score 0 · Accepted Answer

入力要素が個別に更新されるたびに、変更イベントを使用して合計金額を更新できます。以下に簡単な例を示します。

HTML:

<input class="invoice" type="text" value="0" />
<input class="invoice" type="text" value="0" />
<input class="invoice" type="text" value="0" />
<div id="total">0</div>

Javascript:

$('.invoice').change(function() {
    var total = 0;
    $('.invoice').each(function() {
        total += parseFloat($(this).val());
    });
    $('#total').text(total);
});

この jsfiddleで動作することがわかります。

score 0 · Accepted Answer

投稿後まもなく、次のように独自の解決策を思い付くことができました。

function updateTotal(){
    var total=0;
    for(i=0; i < $('.invoice-line').size(); i++){
        currentAmount = Number($('.amount-input').eq(i).val().replace(/[^0-9\.]+/g,""));
        total += currentAmount;
    }
    $('.total-number').text("$" + total.toFixed(2));
}

javascript - 入力値の合計

5 に答える 5

Related

Reference