jQuery -显示基于表单更新的计算

Question

这是一个基本的样例订单，有4个输入(单位编号)。当我输入值时，显示所有相应的信息并进行计算(单位*价格)。每次我添加一个项目时，我想要得到订单的总价值。有一些错误的orderTotal计算时，值正在更新，当我清除值在所有订单总数完全消失。我是jQuery新手，需要一些帮助。

工作小提琴:http://jsfiddle.net/nitadesign/97tnrepg/4/

和代码:

var orderTotal = 0 ;
$(".pack").keyup(function () {
    var curId = this.id.split("k")[1];
    var packName = $('#pack' + curId + '-name').val();
    var packPrice = $('#pack' + curId + '-price').val();
    var packUnit = $(this).val();
    var packTotal = packUnit * packPrice;
    
    orderTotal = orderTotal + packTotal;
    
    if ($(this).val() == '') {
         $("#packcontent_" + curId).hide();
         $("#order_total").hide();  
    } else {
        $("#packcontent_" + curId).html('Units : ' + packUnit + ', Name :  ' + packName + ', Price : ' + packPrice + ', Total : ' + packTotal);
        $("#packcontent_" + curId).show();
     	$("#order_total").html('Order Total: ' +orderTotal);
     	$("#order_total").show();   
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="content" id="packcontent_01" style="display: none;"></div>
<div class="content" id="packcontent_02" style="display: none;"></div>
<div class="content" id="packcontent_03" style="display: none;"></div>
<div class="content" id="packcontent_04" style="display: none;"></div>
<div class="content" id="order_total" style="display: none;"></div>
<p>Pack 1</p>
<input type="text" class="pack" name="pack01" id="pack01" autocomplete="off" maxlength="2" value="" />
<input type="hidden" class="pack" id="pack01-name" name="pack01-name" value="Pack 1" />
<input type="hidden" class="pack" id="pack01-price" name="pack01-price" value="5.00" />
<p>Pack 2</p>
<input type="text" class="pack" name="pack02" value="" id="pack02" autocomplete="off" maxlength="2" />
<input type="hidden" class="pack" id="pack02-name" name="pack02-name" value="Pack 2" />
<input type="hidden" class="pack" id="pack02-price" name="pack02-price" value="6.00" />
<p>Pack 3</p>
<input type="text" class="pack" name="pack03" value="" id="pack03" autocomplete="off" maxlength="2" />
<input type="hidden" class="pack" id="pack03-name" name="pack03-name" value="Pack 3" />
<input type="hidden" class="pack" id="pack03-price" name="pack03-price" value="7.00" />
<p>Pack 4</p>
<input type="text" class="pack" name="pack04" value="" id="pack04" autocomplete="off" maxlength="2" />
<input type="hidden" class="pack" id="pack04-name" name="pack04-name" value="Pack 4" />
<input type="hidden" class="pack" id="pack04-price" name="pack04-price" value="8.00" />

提前非常感谢!

Answer 1

因为您要在每次迭代中存储和更新您的总数，所以您可以尝试创建一个保存订单列表的订单数组。因此，如果您将来添加更多订单，这将是动态的。

你可以像这样创建一个orders数组。

var orders = [];

然后创建3个函数，用于获取、更新和计算订单总数

获取订单

function GetOrder(curId){
    var order = null;
    for(i = 0; i< orders.length; i++){
        if(orders[i].id == curId){
            order = orders[i];
            break;
        }
    }
    return order;
}

更新订单

function UpdateOrders(order){
    for(i = 0; i< orders.length; i++){
        if(orders[i].id == order.id){
            orders[i] = order;
            break;
        }
    }   
}

计算Total

function CalculateTotal(){
    var total = 0;
    for(i = 0; i< orders.length; i++){
        total = total + orders[i].packTotal;
    }
    console.log(total);
    $("#order_total").html('Order Total: ' + total);
    if(total > 0){
        $("#order_total").show();
    }
}

这里有一个工作的JSFIDDLE。