Question

我正在尝试创建一个简单的计算函数，由于我缺乏JS技能，我只是不知道为什么它不起作用。我现在能得到的最好的是一个有效的计算价格＆＃39;一个不工作的＆＃39;计算总数＆＃39;我得到的是＆＃39;计算总数＆＃39;输入是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>

Answer 1

$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
    } );

等...

您的变量不需要以美元符号开头，即：我使用的是价格而不是$ price，而$ total可能只是总数（假设您在任何一个选择中都是一致的）。您可能经常因为jQuery示例而看到这种情况，但人们倾向于使用$作为速记来表明它是您正在处理的jquery事物。

此外，似乎 - 如果存在称为＆＃34;添加行＆＃34;的东西，您将要在此处附加更多cust_row内容，但是您可能遇到问题，因为有些事情是ID。一个ID在页面上应该是唯一的 - 一旦你添加了另一行，你将拥有多个ID为金额的东西。将这些ID更改为类，然后重写相应的选择器以开始。而不是＃

Answer 2

在这一行

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

这个解析是不是从输入数组中浮出来的？如果你删除它，你应该能够遍历你的输入，并且循环中的解析float就足够了。

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

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

2 个答案: