使用jQuery获取值和计算

我有一些输入字段

<input type="text" name="quantity[]" class="est_quantity" placeholder="quantity"/>
<input type="text" name="quantity[]" class="est_quantity" placeholder="quantity"/>
<input type="text" name="quantity[]" class="est_quantity" placeholder="quantity"/>

<input type="text" name="cost[]" class="est_cost" placeholder="cost"/>
<input type="text" name="cost[]" class="est_cost" placeholder="cost"/>
<input type="text" name="cost[]" class="est_cost" placeholder="cost"/>

上述代码工作正常，因为总数量是所有

quantity[]

的总和，但是计算总成本没有什么不同。因为计算是这样的

total cost = total_quantity * cost
//for each field or row.

在计算成本时，我希望该值乘以相应的数量字段

差不多

var cost = $('.est_quantity').val * $('.est_cost').val();

我试着这样做

$('.est_cost').live('keyup', function(){
    var val = 0.00;
    $('.est_cost').each(function() {
        if($(this).val().length && $(this).val() != '') {
            var cost = $(this).val() * $('.est_quantity').val();
            val += parseFloat(cost);
            $('.est_total_cost').html(val.toFixed(2));
        }
    });
});

上面的代码只为第一行获取正确的计算，其余的代码获取一些奇怪的值

如何使用代码进行正确的计算

注意：最初有一行输入字段，包括数量和成本输入字段，其余输入字段在单击事件时动态添加

---

谢谢

.val（）

返回一个数组。在执行计算之前，您需要

parseFloat（）

或

parseInt（）

。

.val（）

返回一个数组。在执行计算之前，您需要

parseFloat（）

或

parseInt（）

。

在第二个代码示例中。。您应该注意有多个元素具有

.est\u quantity

类。当您使用

.est\u cost

类对元素进行迭代时，必须选择一个元素

//Calculate total Quantity, this is how i do it.
$('.est_quantity').live('keyup', function(){
    var val = 0;
    $('.est_quantity').each(function() {
        if($(this).val().length && $(this).val() != '') {
            val += Number($(this).val());
            $('.est_total_quantity').html(val);
        }
    });
});

$(document).on('keyup', '.est_cost, .est_quantity', function(){
    var result = 0,
        $cost = $('.est_cost'),
        $quant = $('.est_quantity');

    $.each($cost, function(i) {
        var costVal = parseFloat( $cost.eq(i).val() ),
            quantVal = parseFloat( $quant.eq(i).val() );

        if (quantVal && costVal) {
            result += costVal * qantVal;
        }
    });

    $('.est_total_cost').text( result.toFixed(2) );
});

像这样的

$('.est_cost').live('keyup', function(){
    var val = 0.00;
    $('.est_cost').each(function(i) {
        if($(this).val().length && $(this).val() != '') {
            var cost = $(this).val() * $('.est_quantity').eq(i).val();
            val += parseFloat(cost);
            $('.est_total_cost').html(val.toFixed(2));
        }
    });
});

注意，im使用每个函数的

索引
参数。
注：-假设第二个代码样本中有相同数量的
.est\u数量
和
.est\u成本
元素
。。您应该注意有多个元素具有
.est\u quantity
类。当您使用
.est\u cost
类对元素进行迭代时，必须选择一个元素

$('.est_cost').each(function(index,val) {
        if($(this).val().length && $(this).val() != '') {
            var cost = $(this).val() * $('.est_quantity:eq('+ index +')').val(); //here eq(index) maintain the order
            val += parseFloat(cost);
            $('.est_total_cost').html(val.toFixed(2));
        }
    });

像这样的

$('.est_cost').live('keyup', function(){
    var val = 0.00;
    $('.est_cost').each(function(i) {
        if($(this).val().length && $(this).val() != '') {
            var cost = $(this).val() * $('.est_quantity').eq(i).val();
            val += parseFloat(cost);
            $('.est_total_cost').html(val.toFixed(2));
        }
    });
});

注意，im使用每个函数的
索引
参数。
注意：-假设
.est_quantity
和
.est_cost
元素的数量相等
好的，所以我将其更改为
var cost=parseFloat（$（this.val（））*parseInt（$（'.est_quantity'）.val（））现在它只是不断添加第一行inputsokay，所以我将其更改为
var cost=parseFloat（$（this.val（））*parseInt（$（'.est_quantity'）.val（））现在它只是不断添加第一行输入谢谢，这段代码大大减少了我的代码，更好、更有条理。谢谢，这段代码大大减少了我的代码，更好、更有条理。
$('.est_cost').each(function(index,val) {
        if($(this).val().length && $(this).val() != '') {
            var cost = $(this).val() * $('.est_quantity:eq('+ index +')').val(); //here eq(index) maintain the order
            val += parseFloat(cost);
            $('.est_total_cost').html(val.toFixed(2));
        }
    });