用于计算发票总额的动态输入字段

Dynamic input field to calculate an invoice total

本文关键字：动态 输入 字段 计算 用于      更新时间：2023-09-26

我试图创建一个简单的计算函数，因为我缺乏JS技能，我只是不知道为什么它不工作。目前我能得到的最好的结果是一个可以工作的"计算价格"和一个不能工作的"计算总数"。无论输入是什么，我从"计算总数"得到的结果都是0.00。这就是我得到的JS:

    //Calculate price
$("#amount").live('click',function() {
    var $itemrow = $(this).closest('.cust_row');
    $quantity = $itemrow.find('#itemQty').val();
    $price = $itemrow.find('#product_price').val();
    $result = $quantity * $price;
    $result = $result.toFixed(2);
    $itemrow.find('#amount').val($result);
});
//Calculate total
$("#total").live('click',function() {
    var $itemrows = $(this).closest('#invoice_items');
    $price = parseFloat($itemrows.find('.amount').val());
    $total = 0.00;
    for (i = 0; i < $price.length; i++)
    {
        $total += parseFloat($price[i].value);
    }
    $result = parseFloat($total).toFixed(2);
    $itemrows.find('#total').val($result);
});

和HTML位:

<div id="invoice_items">
            <div class="cust_row">
                    <div class="cust_row_40"><strong>Product Name</strong></div>
                    <div class="cust_row_30"><strong>Category</strong></div>
                    <div class="cust_row_10"><strong>Quantity</strong></div>
                    <div class="cust_row_10"><strong>Price</strong></div>
                    <div class="cust_row_10"><strong>Amount</strong></div>                
            </div>
            <div class="cust_row">
                    <div class="cust_row_40"><input name="product_name[]" class="input_tbl" id="product_name" tabindex="1"/></div>
                    <div class="cust_row_30"><input name="category_name[]" class="" id="category_name"  readonly="readonly" /></div>
                    <div class="cust_row_10"><input name="itemQty[]" class="itemQty" size="4" id="itemQty" tabindex="2"/></div>
                    <div class="cust_row_10"><input name="product_price[]" class="product_price" size="5" id="product_price" readonly /></div>
                    <div class="cust_row_10"><input name="amount[]" class="amount" id="amount" size="5" readonly  /></div>                
            </div>
            <div class="clear_b"></div>
            <a href="#" id="addRow" class="button-clean large"><span> <img src="../img/icon-plus.png" alt="Add" title="Add Row" /> Add Item</span></a>
            <div style="text-align: right;">Total: <input name="total[]" class="" id="total" size="5" readonly  /></div>
        </div>

本行

$price = parseFloat($itemrows.find('.amount').val());

这不是解析你的输入数组的浮点数吗?如果您删除了它，您应该能够循环您的输入，并且循环中的解析浮点数就足够了。

$price = $itemrows.find('.amount').val(); 

$price = parseFloat($itemrows.find('.amount').val());

你不会从中得到一个列表- parseFloat只解析一个浮点数，尽管它看起来像你期待几个$itemrows

而不是:

$price = parseFloat($itemrows.find('.amount').val());
$total = 0.00;
for (i = 0; i < $price.length; i++)
{
    $total += parseFloat($price[i].value);
}

试试这个:

<div id="invoice_items">
        <div class="cust_row_labels">
        <!-- I changed this... -->

，这样我们就不会在试图获得总计算时意外地抓住它。还有其他方法可以做到这一点，但这是最简单的。

// Given a "cust_row", calculate a price
function calcPrice( $cust_row ) { 
    // The $ in cust_row is a -loosely- defined way
    // indicating something is a "jQuery wrapped" element
    // (not a js coding thing, but more of a jQuery ease of use thing)
    // Below I'm taking your price calculating code and making it
    // more reusable
    var quantity = $cust_row.find('#itemQty').val();
    var price = $cust_row.find('#product_price').val();
    var result = quantity * $price;
    return result.toFixed(2);
}
// We can now use that function whenever, not just when "#amount" is clicked
// but we still have to tie them #amount and the method back together somehow
$("#amount").live( "click", function() {
    var $theAmount = $( this ),
        $customerRow = $theAmount.parents( ".cust_row" );
    $theAmount.val( calcPrice( $customerRow ) );
} );

// function for finding all totals
function overallTotal() {
    var total = 0;
    $( "#invoice_items .cust_row" ).each( function() {
        total += calcPrice( $( this ) );
        // "this" is a weird moving target, in this case
        // its each cust_row as we cycle through them
    } );

等等……

你的变量不需要以美元符号开始，例如:我使用价格而不是$价格，$total可以只是total(假设你选择的是一致的)。由于jQuery的例子，你可能经常看到这种情况，但人们倾向于使用$作为一种简写，表示你正在处理的是jQuery的东西。

此外，似乎-给定所谓的"添加行"的存在，你会想要在这里附加更多的cust_row的东西，但你可能会遇到问题，因为有些东西是id。一个ID在一个页面上应该是唯一的——一旦你添加了另一行，你就会有不止一个ID为amount的东西。将这些id更改为类，然后重新编写合适的选择器。而不是#

相关文章：