如何使用 foreach 生成的输入进行计算？答案

【问题标题】：How to do calculation with inputs generated by foreach?如何使用 foreach 生成的输入进行计算？
【发布时间】：2017-07-11 19:02:51
【问题描述】：

我有一个 foreach 从 mysql db 返回多个项目。每个对象都在我的 html 的输入字段中。

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

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

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

我有 3 个输入：

1 与 class= input_itm_qty
1 与 class= input_price_unit
1 与 class= 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);
       });

【问题讨论】：

请显示一些 HTML
还需要对预期行为进行更好的解释。提供minimal reproducible example

标签： javascript jquery foreach

【解决方案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>

【讨论】：