我如何在不同数量的输入字段上进行JavaScript数学运算？ [英] How might I do JavaScript math on a varying number of input fields?

问题描述

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

I'm building a WordPress plugin that handles, among other things, invoices. The idea is that when I create a new invoice, the plugin will automatically generate one line with default values for each product currently available (stored elsewhere, and not always the same). The problem is that I want to be able to just enter quantities and let the plugin do all the math for me totaling up each line, then a subtotal, then a total for the whole invoice. But my invoice lines are generated dynamically, so I don't necessarily know how many I'm going to have. Here's what I mean:

产品是由WordPress提供给我的，然后我在发票上为每一个存在的产品输出一行，同时附加一个数字给输入框名称的末尾，以便我能够分辨出以后保存信息的时间。

The products are given to me by WordPress, and then I output a line on the invoice for each one that exists, while appending a number to the end of the input box names so that I'll be able to tell which is which when I save the information later.

//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_<?php echo $linenumber; ?>" value="<?php echo $product->ID; ?>">
    <input type="text" class="wpdsd_item" name="wpdsd_item_<?php echo $linenumber; ?>" value="<?php echo $product->post_title; ?>">
    <input type="number" class="wpdsd_qty" name="wpdsd_qty_<?php echo $linenumber; ?>" placeholder="Enter Qty">
    $<input type="number" class="wpdsd_price" name="wpdsd_price_<?php echo $linenumber; ?>" step="0.01" value="<?php echo $product->wpdsd_default_price; ?>">
    $<span class="wpdsd_total" id="wpdsd_total_<?php echo $linenumber; ?>">0.00</span></br>
    <?php
    $linenumber++;
}
?><input type="hidden" name="wpdsd_number_of_lines" value="<?php echo $linenumber; ?>"><?php

}

这是我得到的HTML：

Here's the HTML I get as a result:

    <input type="hidden" class="wpdsd_ID" name="wpdsd_ID_0" value="71">
    <input type="text" class="wpdsd_item" name="wpdsd_item_0" value="1m 8 Pin">
    <input type="number" class="wpdsd_qty" name="wpdsd_qty_0" placeholder="Enter Qty">
    $<input type="number" class="wpdsd_price" name="wpdsd_price_0" step="0.01" value="4">
    $<span class="wpdsd_total" id="wpdsd_total_0">0.00</span></br>

    <input type="hidden" class="wpdsd_ID" name="wpdsd_ID_1" value="45">
    <input type="text" class="wpdsd_item" name="wpdsd_item_1" value="3m USB Type-C">
    <input type="number" class="wpdsd_qty" name="wpdsd_qty_1" placeholder="Enter Qty">
    $<input type="number" class="wpdsd_price" name="wpdsd_price_1" step="0.01" value="5.52">
    $<span class="wpdsd_total" id="wpdsd_total_1">0.00</span></br>

    <input type="hidden" class="wpdsd_ID" name="wpdsd_ID_2" value="76">
    <input type="text" class="wpdsd_item" name="wpdsd_item_2" value="Wall Charger">
    <input type="number" class="wpdsd_qty" name="wpdsd_qty_2" placeholder="Enter Qty">
    $<input type="number" class="wpdsd_price" name="wpdsd_price_2" step="0.01" value="4.69">
    $<span class="wpdsd_total" id="wpdsd_total_2">0.00</span></br>

    <input type="hidden" name="wpdsd_number_of_lines" value="3">

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

For each line on the invoice, I want the total to appear when I input the quantity. In other words,

wpdsd_total_0 = wpdsd_qty_0 * wpdsd_price_0

我还想计算所有行的总数，应用税款和计算总额。

I also want to calculate the total of all lines, apply taxes, and calculate a grand total.

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

I've found other answers that show ways to tell JavaScript or jQuery to do the math, but you have to know the names of your input boxes and the element in which you're displaying the result. How might I tell JavaScript to do the math for each line, however many there happen to be?

编辑：我按照建议添加了一些常用类。但是我仍然不确定接下来会做什么...

I added some common classes, as suggested. But I'm still not sure what I would do next...

推荐答案

这可以使用<$ c $来完成c> onInput 事件。只需在html中添加回调方法，如下所示： onInput =onInputChangeHandler（this）其中此是当前方法被触发的元素。阅读更多关于 onInput 这里。

This can be done using the onInput event. Simply add the callback method in the html like this: onInput="onInputChangeHandler(this)" where this is the current element the method is fired on. Read more about onInput here.

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

Notice how it's only added for the quantity and value fields. Every time either of these fields change, the method will fire.

还要注意我已将每个行分组到它自己的<$ c $中C>< DIV> 。这样我就可以调用 parentNode 来更改当前项目，并准备好使用所有其他元素。您必须将PHP更改为类似的内容，（还将< / br> 更改为< br /> ）。

Also notice that I have grouped each row into it's own <div>. This is so I can just call the parentNode for the current item changed and have all the other elements ready to use. You would have to change the PHP to something like this, (also changed </br> to <br />).

foreach($products as $product){
    ?>
    <div>
    <input type="hidden" class="wpdsd_ID" name="wpdsd_ID_<?php echo $linenumber; ?>" value="<?php echo $product->ID; ?>">
    <input type="text" class="wpdsd_item" name="wpdsd_item_<?php echo $linenumber; ?>" value="<?php echo $product->post_title; ?>">
    <input type="number" class="wpdsd_qty" name="wpdsd_qty_<?php echo $linenumber; ?>" placeholder="Enter Qty">
    $<input type="number" class="wpdsd_price" name="wpdsd_price_<?php echo $linenumber; ?>" step="0.01" value="<?php echo $product->wpdsd_default_price; ?>">
    $<span class="wpdsd_total" id="wpdsd_total_<?php echo $linenumber; ?>">0.00</span><br />
    </div>
    <?php
    $linenumber++;
}

function onInputChangeHandler(obj) {
  var parentObj = obj.parentNode; // Gets the <div>
  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
}

<div>
  <input type="hidden" class="wpdsd_ID" name="wpdsd_ID_0" value="71">
  <input type="text" class="wpdsd_item" name="wpdsd_item_0" value="1m 8 Pin">
  <input type="number" class="wpdsd_qty" name="wpdsd_qty_0" placeholder="Enter Qty" oninput="onInputChangeHandler(this)"> $
  <input type="number" class="wpdsd_price" name="wpdsd_price_0" step="0.01" value="4" oninput="onInputChangeHandler(this)"> $
  <span class="wpdsd_total" id="wpdsd_total_0">0.00</span><br />
</div>
<div>
  <input type="hidden" class="wpdsd_ID" name="wpdsd_ID_1" value="45">
  <input type="text" class="wpdsd_item" name="wpdsd_item_1" value="3m USB Type-C">
  <input type="number" class="wpdsd_qty" name="wpdsd_qty_1" placeholder="Enter Qty" oninput="onInputChangeHandler(this)"> $
  <input type="number" class="wpdsd_price" name="wpdsd_price_1" step="0.01" value="5.52" oninput="onInputChangeHandler(this)"> $
  <span class="wpdsd_total" id="wpdsd_total_1">0.00</span><br>
</div>
<div>
  <input type="hidden" class="wpdsd_ID" name="wpdsd_ID_2" value="76">
  <input type="text" class="wpdsd_item" name="wpdsd_item_2" value="Wall Charger">
  <input type="number" class="wpdsd_qty" name="wpdsd_qty_2" placeholder="Enter Qty" oninput="onInputChangeHandler(this)"> $
  <input type="number" class="wpdsd_price" name="wpdsd_price_2" step="0.01" value="4.69" oninput="onInputChangeHandler(this)"> $
  <span class="wpdsd_total" id="wpdsd_total_2">0.00</span><br />
</div>
<input type="hidden" name="wpdsd_number_of_lines" value="3">

请注意，使用a更容易将自动处理数据绑定的框架，但您必须从gecko开始使用它。考虑一下 AngularJS 或更新 Angular 。

Take a note that this is much easier using a framework that will take care of data binding automagically, but you would have to start using it from the gecko. Consider taking a look at AngularJS or the newer Angular.

这篇关于我如何在不同数量的输入字段上进行JavaScript数学运算？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！