Question

这是一个带有4个输入（单位编号）的基本样本订单。当我输入值时，显示所有相应的信息并进行计算（单位*价格）。每次我添加另一个项目，我想获得订单的总价值。在更新值时以及在完全清除所有Order Total dissapear值时，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

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

你可以做的是创建一个像这样的订单数组。

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显示基于表单更新的计算

1 个答案: