javascript - 用于动态 HTML 循环内部输入的 keyup 事件

Question

我试图在输入两个 HTML 输入时进行乘法运算。此代码适用于其中一张表。

HTML:

{%extends "dashboard.html"%}
{%block content_A%}

            {% for o in org.office %}
                <div class="col-md-18">
                        <div class="card">
                            <div class="header">

                                <h4 class="title">Weekly Report for {{org.organization_name}} {{org.organization_ID}}</h4>
                                <p>Office: {{o.owner_name}} {{o.office_ID}}</p>
                                <p>Week ending: {{we.strftime('%m-%d-%Y')}}</p>
                                <p>Invoice submitted: {{today.strftime('%m-%d-%Y')}}</p>
                          <table>


                                                        <div class="panel-body">
                                                            <div class="row">
                                                        <div class="col-xs-6">
                                      {% if t[1] == o.office_ID%}
                                                                        <h3>Backpacks: {{t[0]}}</h3>
                                      <h5>Per Piece Profit: {{t[2]}}</h5>
                                      <h4>Total Backpack Profit: {{t[4]}}</h4>
                                      {% else %}
                                      <h3>Backpacks: 0</h3>
                                      {% endif %}
                                      <hr>
                                                                    </div>
                                  <div class="col-xs-6">
                                      <h3>Hotlines:</h3>
                                      <div class="form-group row">
                                        <div class="col-xs-4">
                                          <input class="form-control" type="text" name="hln" maxlength="4">
                                          <input class="hidden" type="text" name="or" value="{{t[3]}}">
                                        </div>
                                      </div>
                                     <h5>Per Piece Profit: {{t[3]}}</h5>
                                      <h4>Total Hotline Profit:</h4>
                                      <input type="text" name="hlnt" readonly />
                                   </div>
                                                               </div>
                              </div>
                              </table>
                           </div>
                        </div>
                     </div>

                {% endfor %}

{% endblock %}

这是执行此操作的 Jquery

$(document).on("keyup", "[name='hln']", function() {

  var value = parseFloat($(this).val());
  var or = $('input[name="or"]').val();
  $('input[name="hlnt"]').val(value * or);
});

这适用于单个表，但是 html 是在 Jinja for 循环中动态创建的。 当有多个表时，该值将输入到所有表中。

Answer 1

请参阅下面的工作示例，它将基于 child 工作。 , parent和 sibling关系或 DOM 元素，并将根据值已更改的元素设置值

我已将代码复制两次，以便您可以看到更改值不会在所有总计字段中设置值

$(document).on("keyup", "[name='hln']", function() {

  var value = parseFloat($(this).val());

  // it will select the sibling element which mean the [name='or'] element1
  var or = parseFloat($(this).siblings("input[name='or']").val()); 

  // find the parent of input with class 'parent-class' and then find its child with name hlnt and set the value to it
  $(this).parents(".parent-class").find('input[name="hlnt"]').val(value * or);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-xs-6 parent-class"> <!--add class here-->
  <h3>Hotlines:</h3>
  <div class="form-group row">
    <div class="col-xs-4">
      <input class="form-control" type="text" name="hln" id="hot" maxlength="4">
      <input class="hidden" type="text" id="ovr" name="or" value="3">
    </div>
  </div>
  <h5>Per Piece Profit: 3</h5>
  <h4>Total Hotline Profit:</h4>
  <input type="text" name="hlnt" id="output-value" readonly />
</div>
   
 <!--copied same content as above to see how this work as saperately withot affeting others->
<div class="col-xs-6 parent-class"> <!--add class here-->
  <h3>Hotlines:</h3>
  <div class="form-group row">
    <div class="col-xs-4">
      <input class="form-control" type="text" name="hln" id="hot" maxlength="4">
      <input class="hidden" type="text" id="ovr" name="or" value="4">
    </div>
  </div>
  <h5>Per Piece Profit: 4</h5>
  <h4>Total Hotline Profit:</h4>
  <input type="text" name="hlnt" id="output-value" readonly />
</div>