Question

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

我想计算2个输入值，并将其显示在第三个输入值中。

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

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

我有3个输入：

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

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>

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

1 个答案: