我如何在不同数量的输入字段上进行JavaScript数学运算？

我正在构建一个WordPress插件，用于处理发票等。 我的想法是，当我创建新发票时，插件会自动生成一行，其中包含当前可用的每种产品的默认值（存储在其他地方，并不总是相同）。 问题是我希望能够只输入数量并让插件为我计算总计每行的所有数学，然后是小计，然后是整个发票的总计。 但我的发票行是动态生成的，所以我不一定知道我会有多少。 这就是我的意思：

这些产品是由WordPress发给我的，然后我在发票上为每一个存在的一行输出一行，同时在输入框名称的末尾附加一个数字，这样我就可以知道哪个是什么时候我稍后保存信息。

//Define the contents of the invoice lines box function wpdsd_invoice_lines_mb_contents(){ //Get an array off all available products, sorted by item position as set by user $arguments = array( 'post_type' => 'wpdsd_product', 'numberposts' => '-1', 'order' => 'ASC', 'orderby' => 'meta_value', 'meta_key' => 'wpdsd_item_position', ); $products = get_posts($arguments); //Output an invoice line for each available product $linenumber = 0; foreach($products as $product){ ?> <input type="hidden" class="wpdsd_ID" name="wpdsd_ID_" value="ID; ?>"> <input type="text" class="wpdsd_item" name="wpdsd_item_" value="post_title; ?>"> <input type="number" class="wpdsd_qty" name="wpdsd_qty_" placeholder="Enter Qty"> $<input type="number" class="wpdsd_price" name="wpdsd_price_" step="0.01" value="wpdsd_default_price; ?>"> $<span class="wpdsd_total" id="wpdsd_total_">0.00
 <input type="hidden" name="wpdsd_number_of_lines" value=""><?php } 

这是我得到的HTML结果：

     $ $0.00
    $ $0.00
    $ $0.00
  

对于发票上的每一行，我希望在输入数量时显示总数。 换一种说法，

 wpdsd_total_0 = wpdsd_qty_0 * wpdsd_price_0 

我还想计算所有行的总数，应用税金，并计算总计。

我发现其他答案显示了告诉JavaScript或jQuery进行数学计算的方法，但您必须知道输入框的名称以及显示结果的元素。 我怎么能告诉JavaScript为每一行做数学运算，但是有很多情况呢？

编辑：我建议添加一些常见的类。 但是我还不确定接下来会做什么……

Answer 1

这可以使用onInput事件来完成。 只需在html中添加回调方法，如下所示： onInput="onInputChangeHandler(this)"这里是触发该方法的当前元素。 在这里阅读更多关于onInput 信息 。

请注意它是如何仅为数量和值字段添加的。 每当这些字段中的任何一个发生变化时，该方法都将触发。

另请注意，我已将每行分组为自己的

。 这样我就可以调用parentNode来更改当前项目并准备好使用所有其他元素。 你必须将PHP更改为这样的东西，（也改为到
）。

 foreach($products as $product){ ?> 
    $ $0.00
 
  

 function onInputChangeHandler(obj) { var parentObj = obj.parentNode; // Gets the 
 var children = parentObj.children; // Gets all the inputs var quantity = children[2].value; // Get the quantity var value = children[3].value; // Get the value children[4].innerHTML = Math.round((quantity * value)*100)/100; // Calculate the total for the total child: Math.round() * 100/100 will round to second decimal place } 

 
    $  $ 0.00
 
 
    $  $ 0.00
 
 
    $  $ 0.00