javascript - 我如何对不同数量的输入字段进行 JavaScript 数学运算？

Question

我正在构建一个 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_<?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:

    <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">

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

wpdsd_total_0 = wpdsd_qty_0 * wpdsd_price_0

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

我找到了其他答案，这些答案显示了告诉 JavaScript 或 jQuery 进行数学运算的方法，但您必须知道输入框的名称以及显示结果的元素。我如何告诉 JavaScript 对每一行进行数学运算，无论碰巧有多少行？

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

Answer 1

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

请注意它是如何只添加到数量 和值 字段的。每次这些字段中的任何一个更改时，都会触发该方法。

另请注意，我已将每个 行 分组到它自己的 <div> 中.这样我就可以调用 parentNode为当前项目更改并准备好使用所有其他元素。您必须将 PHP 更改为类似这样的内容(也将 </br> 更改为 <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">

请注意，使用一个自动处理数据绑定(bind)的框架要容易得多，但您必须从 gecko 开始使用它。考虑看看 AngularJS或更新的 Angular .