从动态字段计算数字

Question

关于释放键我试图计算在文本字段中输入的数字。 将它们转换为整数我想让它们计算在这里找到多种方法来解决这个问题。例如

注意：下面这个片段就是比如我把它从某处计算器我并不想这样做，我的领域是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第一次添加类，并通过我定制我成功地做出了“成员1指定的受益人”下面的“结果”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动态添加一串有ID，如input_59-1-*元素当用户点击文档中的类为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”（由其他职位在这里指出的）添加类。我添加了parseInt以避免使用NaN添加。我将jQuery select改为.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"/>