javascript - 如何使用foreach生成的输入进行计算？

Question

我有一个 foreach 从 mysql 数据库返回多个项目。每个对象都位于我的 html 中的输入字段中。

我想计算 2 个输入值并将它们显示为第三个结果。

当我只有一组输入(数量 * 单位 = 结果)时，它可以工作，但是使用 foreach 会将每个单位和结果输入分配相同的类，因此我的 js 似乎不起作用。

我的目标是使用 foreach 生成 mysql 中的项目列表，并让用户定义一个数量值，这将计算总数。 但目前，当我更改数量值时，它会使用所有 input_price_unit 输入进行计算。

我有 3 个输入:

• 1 类 = input_itm_qty
• 1 类 = input_price_unit
• 1 类 = input_price_total

以下是我的功能:

 $(".price_calc").keyup(function(){
              var val1 = +$(".input_itm_qty").val();
              var val2 = +$(".input_price_unit").val();
              $(".input_price_total").val(val1*val2);
       });

Answer 1

您可以将元素包装(分组)到一些共同的父级中，例如类是 .someParentClass ，您可以这样做:

$(".price_calc").on("input", function(){
    var $parentElement = $(this).closest(".someParentClass");
    var val1 = +$parentElement.find(".input_itm_qty").val();
    var val2 = +$parentElement.find(".input_price_unit").val();
    $parentElement.find(".input_price_total").val(val1*val2);
}).trigger("input");

.someParentClass{border-bottom: 1px solid #999;}
[type=number]{text-align: right;}
[disabled] {background:0; border:0;}

<div class="someParentClass">
  FOOS<br>
  <input class="input_itm_qty price_calc" type=number value=1 min=0> QTY<br>
  <input class=input_price_unit type=number disabled value=20> $<br>
  <input class=input_price_total type=number disabled>  TOTAL
</div>

<div class="someParentClass">
  BARS<br>
  <input class="input_itm_qty price_calc" type=number value=1 min=0> QTY<br>
  <input class=input_price_unit type=number disabled value=35> $<br>
  <input class=input_price_total type=number disabled>  TOTAL
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>