javascript循环不适用于django表单集字段计算，仅计算一个带有id（例如id_forms-0-rate）的表单集字段

Question

这是我模板中的代码，它从输入字段 ID 中获取值并计算该值。代码 仅适用于一个表单集字段或项目，例如 id= id_form-0-rate 的字段或项目。我不知道为什么循环 不适用于添加的表单集，例如 id= id_form-1-rate 的表单集。

template.html

 <script type = "text/javascript" >
        var id= $("#id_form-TOTAL_FORMS").val();
        console.log(id); 
        for(let i=0; i<10; i++)
        {
            console.log(i);
        $("#id_form-" + i + "-quantity").keyup(function () {
            var rate = parseFloat($("#id_form-" + i + "-rate").val());
            var quantity = parseFloat($("#id_form-" + i + "-quantity").val());
            var discount = parseFloat($("#id_form-" + i + "-discount").val());
            $("#id_form-" + i + "-amount").val(rate * quantity - discount);
        });
        $("#id_form-" + i + "-rate").keyup(function () {
            var rate = parseFloat($("#id_form-" + i + "-rate").val());
            var quantity = parseFloat($("#id_form-" + i + "-quantity").val());
            var discount = parseFloat($("#id_form-" + i + "-discount").val());
            $("#id_form-" + i + "-amount").val(rate * quantity - discount);
        });
        $("#id_form-" + i + "-discount").keyup(function () {
            var rate = parseFloat($("#id_form-" + i + "-rate").val());
            var quantity = parseFloat($("#id_form-" + i + "-quantity").val());
            var discount = parseFloat($("#id_form-" + i + "-discount").val());
            $("#id_form-" + i + "-amount").val(rate * quantity - discount);
        });
        }
</script>

Answer 1

不需要你复杂的代码。
只需要这些行：

<script>
$(document).on('keyup',"input[id$='-quantity']",fn);
$(document).on('keyup',"input[id$='-rate']",fn);
$(document).on('keyup',"input[id$='-discount']",fn);
function fn(){
   var rate = parseFloat($(this).closest("#parent").find("input[id$='-rate']").val());
   var quantity = parseFloat($(this).closest("#parent").find("input[id$='-quantity']").val());
   var discount = parseFloat($(this).closest("#parent").find("input[id$='-discount']").val());
   $(this).closest("#parent").find("input[id$='-amount']").val(rate * quantity - discount);
};
</script>

{% csrf_token %}
{{ formset.management_form }}
{% for form in formset %}
<div id="parent">
   {{ form.as_p }}
</div>
{% endfor %}