ダイナミックフィールドから数値を計算する

Question

私はテキストフィールドに入力された数値を計算しようとしています。 それらを整数に変換するこの問題を解決するには、ここで計算された複数の方法が見つかりました。例えば

注：以下のこのコードは、私はこれを実行しようとしていないよstackoverflowの上のどこかからそれを取るしている例であり、私のフィールドはjqueryので

$(document).on("change", ".qty1", function() { 
 
    var sum = 0; 
 
    $(".qty1").each(function(){ 
 
     sum += +$(this).val(); 
 
    }); 
 
    $(".total").val(sum); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" class="qty1" value="" /> 
 
    <input type="text" class="qty1" value="" /> 
 
    <input type="text" class="qty1" value="" /> 
 
    <input type="text" class="qty1" value="" /> 
 
    <input type="text" class="qty1" value="" /> 
 
    <input type="text" class="qty1" value="" /> 
 

 
    <input type="text" class="total" value="" />

動的です

しかし、ここでの問題は、私のフィールドは、jquery、http://sageaccountants.biz/forms/smsf-with-individual-trustee/を使って動的になっているので、私はフォームへのアクセスが制限されていないので、私はjqueryでクラスを追加しています私のカスタマイズ私は "メンバー1によって任命された受益者"のすぐ下の "結果" divを作成することができました。ここで動作するようには思えない「+」アイコンがあるかもしれない複数のフィールドとidによってクラスを追加することで、私の方法を押すと上の

var count = 0; 
jQuery(".gf_repeater_add").on("click", function(){ 
jQuery("#input_59-1-"+count).addClass('member1'); 
if(count == 10) 
{ 
count = 0; 
} 
}); 
jQuery(document).on("change", ".medium", function() { 
    var sum = 0; 
    jQuery(".medium").each(function(){ 
     sum += +jQuery(this).val(); 
    }); 
    jQuery(".total").val(sum); 
}); 

<input name="input_59-1-1" id="input_1_59-1-1" type="text" value="" class="medium" tabindex="25" aria-invalid="false" data-repeater-inputid="1"> 

： は、ここで私はこれまでやっている私のコードです。私は

jQuery(".gf_repeater_add").on("click", function(){ 
jQuery("#input_59-1-"+count).addClass('member1'); 
if(count == 10) 
{ 
count = 0; 
} 
}); 

をやっているが、それは単一のものにクラスを追加していないか、または動的な1

Answer 1

私は、これはあなたがやろうとしているものだと思う：

あなたが動的にinput_59-1-*などのIDを持つ要素の束にクラスmemberを追加しようとしていますの場合、ユーザーがクラス内の別の要素（gf_repeater_add）をドキュメント内でクリックすると、

documentで、クラスを持つ選択されたフィールドの数値をすべて追加する動的ハンドラが必要です（動的要素とは、前述の要素をクリックするまで、実行される要素がまだ存在しないためです）。 memberとし、別の入力ボックスに合計を入れます。

以下のデモをご覧ください。

console.log("Demo"); 
 
$(".gf_repeater_add").on("click", function(){ 
 
    console.log("Adding 'member' class to all the input boxes"); 
 
    for (var count=0; count<3; count++) { 
 
     $("#input_1_59-1-"+count).addClass('member'); 
 
    } 
 
}); 
 

 
$(document).on("change", ".member", function() { 
 
    console.log("Adding data from all input boxes"); 
 
    var sum=0; 
 
    $(".member").each(function(){ 
 
     if ($(this).val()!=="") { 
 
      sum += parseInt($(this).val()); 
 
     } 
 
    }); 
 
    $("#total").val(sum); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="gf_repeater_add">Make boxes addable</button> 
 
<input id="input_1_59-1-1" type="text" value="" class="medium"/> 
 
<input id="input_1_59-1-2" type="text" value="" class="medium"/> 
 
<br><br>Result: 
 
<input id="total" type="text" value="" class="medium"/>

Answer 2

に私は（ここでは他の記事で指摘）「A」を削除しました。 NaNでの追加を避けるためにparseIntを追加しました。私はjQueryの選択を.qty1自体に変更しました（これはオプションかもしれません）。

$(".qty1").on("change", function() { 
 
    sum=0; 
 
    $(".qty1").each(function() { 
 
     myval=$(this).val(); 
 
     if (myval==="") return; 
 
     sum += parseInt($(this).val()); 
 
     console.log("Sum is: "+sum); 
 
     $(".total").val(sum); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" class="qty1" value="" /> 
 
    <input type="text" class="qty1" value="" /> 
 
    <input type="text" class="qty1" value="" /> 
 
    <input type="text" class="qty1" value="" /> 
 
    <input type="text" class="qty1" value="" /> 
 
    <input type="text" class="qty1" value="" /> 
 

 
    <input type="text" class="total" value="" />

Answer 3

これは、「私たちは、別のボタンをクリックせずにそれを行うことができます」、あなたの質問に対応しています。私はこのコードを書いていますので、あなたはまだ他の答えに戻ることができます。

クリックが不要な場合はボタンは不要ですが、入力要素にクラスを追加する必要はありません。 idのパターンマッチングによって、すべての入力要素にハンドラを書くことができます。以下のデモをご覧ください。

$("*[id^=input_1_59-1-]").on("change",function() { 
 
    console.log("Adding data from all input boxes"); 
 
    var sum=0; 
 
    $("*[id^=input_1_59-1-]").each(function(){ 
 
     if ($(this).val()!=="") {sum += parseInt($(this).val());} 
 
    }); 
 
    $("#total").val(sum); 
 
});

<script 
 
    src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
 
</script> 
 
<input id="input_1_59-1-1" type="text"/> 
 
<input id="input_1_59-1-2" type="text"/> 
 
<input id="input_1_59-1-3" type="text"/> 
 
<input id="input_1_59-1-4" type="text"/> 
 
<br><br>Result: 
 
<input id="total" type="text"/>