Question

我正在尝试为用户输入值的每一行设置，然后将该值乘以相应的美元金额，最后添加到输入文本ESTIMATE_TTL

<div class="col-md-12">
  <small><strong>ESTIMATE - TOTAL</strong></small>
  <div class="input-group input-group-sm my-1">
    <input class="form-control form-control-sm" id="ESTIMATE_TTL" name="ESTIMATE_TTL" placeholder="$0.00" type="text" input="" pattern="[0-9]*" inputmode="numeric" value="" maxlength="4">
    <span class="input-group-btn"><button class="btn btn-primary" type="button"><i class="fa fa-refresh fa-lg"></i>&nbsp;&nbsp;&nbsp;REFRESH</button></span>
  </div>
</div>

如何将span id的span内部文本与其对应的文本输入相乘，然后按此计算量增加div estimate id。

这是一个可视化的工作链接

Online Example here

实施例

<div class="col-md-12"> <small><strong>EMERGENCY SERVICE CALL</strong></small>
  <div class="input-group input-group-sm my-1"><span class="input-group-addon">EA</span>
    <input class="form-control form-control-sm" id="EA_WTRESRVD" name="EA_WTRESRVD" placeholder="0" type="text" input pattern="[0-9]*" inputmode="numeric" value="" maxlength="4"> <span class="input-group-addon"><i id="STS_WTRESRVD" class="fa fa-stop fa-lg"></i></span>    <span id="PRC_WTRESRVD" class="input-group-addon">$122.67</span> </div>
</div>
<div class="col-md-12"> <small><strong>EMERGENCY SERVICE CALL AFTER HRS</strong></small>
  <div class="input-group input-group-sm my-1"><span class="input-group-addon">EA</span>
    <input class="form-control form-control-sm" id="EA_WTRESRV" name="EA_WTRESRV" placeholder="0" type="text" input pattern="[0-9]*" inputmode="numeric" value="" maxlength="4"> <span class="input-group-addon"><i id="STS_WTRESRV" class="fa fa-stop fa-lg"></i></span>    <span id="PRC_WTRESRV" class="input-group-addon">$184.00</span> </div>
</div>
<div class="col-md-12"> <small><strong>ASBESTOS TEST FEE</strong></small>
  <div class="input-group input-group-sm my-1"><span class="input-group-addon">EA</span>
    <input class="form-control form-control-sm" id="EA_FEEASBT" name="EA_FEEASBT" placeholder="0" type="text" input pattern="[0-9]*" inputmode="numeric" value="" maxlength="4"> <span class="input-group-addon"><i id="STS_FEEASBT" class="fa fa-stop fa-lg"></i></span>    <span id="PRC_FEEASBT" class="input-group-addon">$300.00</span> </div>
</div>

如果我可以设法将此功能合并到我的keyup事件中，那么REFRESH按钮可以消失，但如果不是，它也可以。

Answer 1

这是一个小型演示来帮助您。总计将在focusout选择器的每个input上更新。

$(".form-control-sm").on('focusout', function() {
  var price = $(this).parent().find(".input-group-addon").text();
  price = parseFloat(price.replace('EA$', ''));
  var enteredVal = $(this).val() != '' ? $(this).val() : 0;
  var total = price * enteredVal;
  $(".totalPrice").text(parseFloat($(".totalPrice").text()) + total);
});

.totalPrice {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12"> <small><strong>EMERGENCY SERVICE CALL</strong></small>
  <div class="input-group input-group-sm my-1"><span class="input-group-addon">EA</span>
    <input class="form-control form-control-sm" id="EA_WTRESRVD" name="EA_WTRESRVD" placeholder="0" type="text" input pattern="[0-9]*" inputmode="numeric" value="" maxlength="4"> <span class="input-group-addon"><i id="STS_WTRESRVD" class="fa fa-stop fa-lg"></i></span>    <span id="PRC_WTRESRVD" class="input-group-addon">$122.67</span> </div>
</div>
<div class="col-md-12"> <small><strong>EMERGENCY SERVICE CALL AFTER HRS</strong></small>
  <div class="input-group input-group-sm my-1"><span class="input-group-addon">EA</span>
    <input class="form-control form-control-sm" id="EA_WTRESRV" name="EA_WTRESRV" placeholder="0" type="text" input pattern="[0-9]*" inputmode="numeric" value="" maxlength="4"> <span class="input-group-addon"><i id="STS_WTRESRV" class="fa fa-stop fa-lg"></i></span>    <span id="PRC_WTRESRV" class="input-group-addon">$184.00</span> </div>
</div>
<div class="col-md-12"> <small><strong>ASBESTOS TEST FEE</strong></small>
  <div class="input-group input-group-sm my-1"><span class="input-group-addon">EA</span>
    <input class="form-control form-control-sm" id="EA_FEEASBT" name="EA_FEEASBT" placeholder="0" type="text" input pattern="[0-9]*" inputmode="numeric" value="" maxlength="4"> <span class="input-group-addon"><i id="STS_FEEASBT" class="fa fa-stop fa-lg"></i></span>    <span id="PRC_FEEASBT" class="input-group-addon">$300.00</span> </div>
</div>


Total: <span class='totalPrice'>0</span>

通过输入文本值乘以内部文本。怎么样？

1 个答案: