вычисление чисел из динамических полей

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/, и я использую wordpress, поэтому у меня мало ограниченный доступ к форме. Я сначала добавляю классы через jquery, и так мне удалось настроить «результат» div чуть ниже «бенефициара, назначенного членом1». Вот мой код, что я сделал до сих пор:

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; 
} 
}); 

но это не добавляет класс в одном одном или в динамическом одном

Answer 1

Я думаю, что это то, что вы пытаетесь сделать:

Вы пытаетесь динамически добавить класс member на кучу элементов, которые имеют идентификаторы, как 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 на сам .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^=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"/>