从动态字段计算数字

时间:2016-10-02 20:37:30

标签: javascript jquery wordpress

发布密钥时我试图计算在文本字段中输入的数字。 将它们转换为整数我希望得到它们的计算在这里找到了多种方法来解决这个问题。 e.g

  

注意:下面的代码片段是我从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="" />
&#13;
&#13;
&#13;

但问题是我的字段是动态使用jquery,http://sageaccountants.biz/forms/smsf-with-individual-trustee/和我使用wordpress所以我几乎没有限制访问形式我通过jquery首先添加类和我有一些自定义设法做出了一个&#34;结果&#34;低于&#34;受益人由会员1和#34;任命。 这是我的代码到目前为止我所做的:

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

按下&#34; +&#34;图标可能有更多字段,我按ID添加类的方法似乎没有在这里工作。我正在做

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

但它不会在单一或动态的

中添加课程

3 个答案:

答案 0 :(得分:1)

我删除了&#39; A&#39; (这里的其他帖子指出)。我添加了parseInt以避免添加NaN。我将jQuery select更改为.qty1本身(可能是可选的)。

&#13;
&#13;
mMainFragment
&#13;
null
&#13;
&#13;
&#13;

答案 1 :(得分:1)

我认为这就是你要做的事情:

当您尝试使用 member 时,如果用户点击其他元素,您会尝试动态添加 input_59-1-* 在课程中将课程设为 gf_repeater_add

你想要一个动态处理程序(我说动态因为它应该运行的元素在你点击上面提到的元素之前还没有存在)document上添加了所有数字选定的字段为 member ,并将总数放入另一个输入框。

请参阅下面的演示。

&#13;
&#13;
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);
});
&#13;
<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"/>
&#13;
&#13;
&#13;

答案 2 :(得分:1)

这是对你的问题的回答,&#34;我们可以不点击另一个按钮&#34;来做。我写了这段代码,如果你还想要,你可以参考另一个答案。

如果您不需要点击,则不需要按钮,您不需要在输入元素中添加类。您可以通过ID上的模式匹配在所有输入元素上编写处理程序。请参阅以下演示。

&#13;
&#13;
$("*[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);
});
&#13;
<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"/>
&#13;
&#13;
&#13;