jQuery

Question

这是一个基本的样本订单表格，有 4 个输入（单位编号）。当我输入值时，将显示所有相应的信息并进行计算（单位 * 价格）。每次我添加另一个项目时，我都想获得订单的总价值。当更新值时以及我清除所有值时，orderTotal 计算出现问题 Order Total 完全消失。我是 jQuery 的新手，需要一些帮助，谢谢。

工作fiddle：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

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

您可以像这样创建一个订单数组。

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

计算总计

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。希望这有帮助。

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

jQuery - display of calculations based on form update with keyup

forms

jquery-calculation