javascript - 从动态字段计算数字

Question

在释放 key 时，我正在尝试计算在文本字段中输入的数字。将它们转换成整数我想让它们计算出来，在这里找到了多种方法来解决这个问题。例如

Note: This snippet below is example i have take it from somewhere on stackoverflow i'm not trying to do this, my fields are dynamic in 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/我正在使用 wordpress，所以我对表单的访问几乎没有限制 我首先通过 jquery 添加类，然后通过一些自定义，我设法在“member1 指定的受益人”下方创建了一个“结果”div。这是我到目前为止所做的代码:

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

在按下“+”图标时，可能会有更多字段，而我通过 id 添加类的方法在这里似乎不起作用。我在做

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

但它不会在单个或动态中添加类

Answer 1

我想这就是你想要做的:

您正在尝试将一个类 member 动态添加到一堆具有 input_59-1-* 等 ID 的元素 当用户单击文档中另一个类为 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"/>