值更新问题的形式（jQuery的功能）

Question

我有这个简单的订单表单，它工作正常，免除一个条件。让我举个例子。我用数字填充所有文件，脚本计数项目数量，它们的总值 - 没有问题。

现在问题开始，如果我决定更新值，并保留其中一个字段为空（模糊功能将空输入更改为0），但它没有更新值为0，因此脚本不会重新计算订单的值。 （计算脚本由键控功能触发）。

我想要做的是保持（关于模糊和聚焦函数）的功能，并让它们连接到kayup函数（因此可以完成计算）。希望我明确解释自己。我尝试了一些东西，但我不能让所有的功能一起工作。请帮忙。非常感谢你提前。

工作的jsfiddle： https://jsfiddle.net/nitadesign/97tnrepg/53/

HTML：

<span class="txtbooking"><strong>SHOPPING BASKET</strong></span> 
<div id="order_total" style="display: none;"></div> 
<input type='submit' name='submit' id='submit' class="submitorder" value='Check Out' /> 
<form name='packaging' action="test.php" method='post'> 
    <input name="totalUnits" type="hidden" id="totalUnits"> 
    <p>Pack 1</p> 
    <input type='text' class='pack' name='pack01' id='pack01' autocomplete='off' maxlength='3' value='0'/> 
    <input type='hidden' class='pack' id='ppack01-price' name='ppack01-price' value='5' /> 

    <p>Pack 2</p> 
    <input type='text' class='pack' name='pack02' id='pack02' autocomplete='off' maxlength='3' value='0'/> 
    <input type='hidden' class='pack' id='ppack02-price' name='ppack02-price' value='7' /> 
    <p>Pack 3</p> 
    <input type='text' class='pack' name='pack03' id='pack03' autocomplete='off' maxlength='3' value='0'/> 
    <input type='hidden' class='pack' id='ppack03-price' name='ppack03-price' value='9' /> 
</form> 

和JS：

var orders = []; 
$(".pack").keyup(function() { 
    var curId = this.id.split("k")[1]; 
    var packPrice = parseFloat($('#ppack' + curId + '-price').val()).toFixed(2); 
     var packUnit = parseInt($(this).val()); 
     var packTotal = parseInt(packUnit * packPrice); 

    var order = null; 
    order = GetOrder(curId); 

    if(order == null){ 
     order = {}; 
     order.id = curId; 
     order.packPrice = packPrice; 
     order.packUnit = packUnit; 
     order.packTotal = packUnit * packPrice; 
     orders.push(order); 
    } 
    else{ 
     order.packPrice = packPrice; 
     order.packUnit = packUnit; 
     order.packTotal = packUnit * packPrice;  
     UpdateOrders(order); 
    } 



    $(window).scroll(CalculateTotal) 
    CalculateTotal(); 
    ; 

}); 

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 : ' + total); 

    if(total > 0){ 
     var counter = 0; 
     $("input[name^=pack]").each(function(){ 
     if($(this).val() != "" && $(this).val() != 0) counter++; 
     }); 
     console.log('counter : ' + counter); 
     var totalUnits = 0; 
     $("input[name^=pack]").each(function(){ 
      packUnit = parseInt($(this).val()); 
      totalUnits = totalUnits + packUnit; 
     }); 
     document.packaging.elements['totalUnits'].value = totalUnits; 
     console.log('totalUnits : ' + totalUnits); 

     $("#order_total").html('<table class="txts"><tr><td>Total Items:</td><td><strong>' + totalUnits + '<strong></td><tr><td>' + 'Order Subtotal:</td><td><strong>&pound;' + total.toFixed(2) + '</strong></td></tr></table>'); 
     $("#order_total").show(); 
     $('.submitorder').show(); 
    } 
    if(total == 0){ 
     $("#order_total").html('<span class="txts">Your shopping basket is empty</span>'); 
     $("#order_total").show(); 
     $('.submitorder').hide(); 
    } 

} 

$("input[name^=pack]").on("change blur", function() { 
    if (!this.value) { 
     this.value = 0; 
    } 
}); 

$("input[name^=pack]").on("change focus", function() { 
    if (this.value == "0") { 
     this.value = ""; 
    } 
}); 

$(function(){ 
    $(window).scroll(CalculateTotal) 
    CalculateTotal(); 
}); 

Answer 1

检查，如果值是数字，如果不将它们设置为0

if (isNaN(packUnit)) { 
     packUnit = 0; 
    } 

演示：https://jsfiddle.net/97tnrepg/54/

或https://jsfiddle.net/97tnrepg/55/