Question

所以我有一个多输入表单，其中包含一些需要添加的字段，一些字段被减去并总计显示在一个通过类显示的列表中。出于某种原因，我的数学不能显示总数。理想情况下，我希望首先在第一个输入框中填充初始车辆价格并显示在显示总价格的列表中。有人可以看看我做错了吗。

HTML：

<form class="form-inline" role="form">
              <!--Adjust Vehicle Cost -->
              <div class="form-group col-sm-6"> <span class="glyphicon glyphicon-usd"</span>
                <label for="vehiclePrice">Vehicle Price</label>
                <input type="number" class="form-control" id="vehiclePrice" placeholder="Vehicle Price" onkeypress="return isNumberKey(event)">
              </div>
              <div class="form-group col-sm-6"> <span class="glyphicon glyphicon-usd"</span>
                <label for="estimatedTaxesAndFees">Estimated Taxes and Fees</label>
                <input type="number" class="form-control" id="estimatedTaxesAndFees" placeholder="Estimated Taxes and Fees" onkeypress="return isNumberKey(event)">
              </div>
            </form>

              <h6>DOWN PAYMENT & TRADE-IN</h6>
              <hr>
              <form class="form-inline" role="form">
                <div class="form-group col-sm-6"> <span class="glyphicon glyphicon-usd"</span>
                  <label for="downPayment">Down Payment</label>
                  <input type="number" class="form-control" id="downPayment" placeholder="Down Payment" onkeypress="return isNumberKey(event)">
                </div>
                <div class="form-group col-sm-6"> <span class="glyphicon glyphicon-euro"</span>
                  <label for="manufacturerRebate">Manufacturer Rebate</label>
                  <input type="number" class="form-control" id="manufacturerRebate" placeholder="Manufacturer Rebate" onkeypress="return isNumberKey(event)">
                </div>
                <div class="form-group col-sm-6"> <span class="glyphicon glyphicon-usd"</span>
                  <label for="tradeInValue">Trade-In Value</label>
                  <input type="number" class="form-control" id="tradeInValue" placeholder="tradeInValue" onkeypress="return isNumberKey(event)">
                </div>
                <div class="form-group col-sm-6"> <span class="glyphicon glyphicon-usd"</span>
                  <label for="amtOwedOnTrade">Amt Owed on Trade</label>
                  <input type="number" class="form-control" id="amtOwedOnTrade" placeholder="Amt Owed on Trade" onkeypress="return isNumberKey(event)">
                </div>
              </form>

              <h6>PROTECT YOUR PURCHASE</h6>
              <hr>
              <form class="form-inline" role="form">
                <div class="form-group col-sm-6"> <span class="glyphicon glyphicon-euro"</span>
                  <label for="extendedWarranty">Extended Warranty</label>
                  <input type="email" class="form-control" id="extendedWarranty" placeholder="Extended Warranty" onkeypress="return isNumberKey(event)"></input>
                </div>
                <div class="form-group col-sm-6"> <span class="glyphicon glyphicon-euro"</span>
                  <label for="gapInsurance">Gap Insurance</label>
                  <input type="password" class="form-control" id="gapInsurance" placeholder="Gap Insurance" onkeypress="return isNumberKey(event)">
                </div>
                <div class="form-group col-sm-6"> <span class="glyphicon glyphicon-euro"</span>
                  <label for="serviceContract">Service Contract</label>
                  <input type="password" class="form-control" id="serviceContract" placeholder="Service Contract" onkeypress="return isNumberKey(event)">
                </div>
              </form>




  <ul>
            <li>$28,435</li><!--This always need to revert back if nothing is filled out-->
            <li>Total Financed Amount<span class="glyphicon glyphicon-cloud"></span></li>
            <li class="total"></li>
          </ul> 
  <ul>
                <li>5.30%</li>
                <li>APR for 72 Months<span class="glyphicon glyphicon-cloud"></span></li>
                 <li></li>
              </ul>
               <ul class="fltrt">
            <li>$461/mo</li>
            <li>Estimated Payment<span class="glyphicon glyphicon-cloud"></span></li>
             <li></li>
          </ul>

JS：

$( document ).ready(function() {
console.log( "ready!" );
//vehicle price
$('#vehiclePrice').keyup(function() {
    updateTotal();
});
//estimated taxes and fees
$('#estimatedTaxesAndFees').keyup(function() {
    updateTotal();
});
//down payment
$('#downPayment').keyup(function() {
    updateTotal();
});
//manufacturer rebate
$('#tradeInValue').keyup(function() {
    updateTotal();
});
//trade in value
$('#manufacturerRebate').keyup(function() {
    updateTotal();
}); 
//amt owed on trade
$('#amtOwedOnTrade').keyup(function() {
    updateTotal();
});  
//extended warranty
$('#extendedWarranty').keyup(function() {
    updateTotal();
}); 
//gap insurance
$('#gapInsurance').keyup(function() {
    updateTotal();
});
//service contract
$('#serviceContract').keyup(function() {
    updateTotal();
});

  var updateTotalAmtFinanced = function() {
    var input1 = parseInt($('#vehiclePrice').val());
    var input2 = parseInt($('#estimatedTaxesAndFees').val());
    var input3 = parseInt($('#downPayment').val());
    var input4 = parseInt($('#tradeInValue').val());
    var input5 = parseInt($('#manufacturerRebate').val());
    var input6 = parseInt($('#amtOwedOnTrade').val());
    var input7 = parseInt($('#extendedWarranty').val());
    var input8 = parseInt($('#gapInsurance').val());
    var input9 = parseInt($('#serviceContract').val());
        var max = 40000;
         var basePrice = 28445;
        var totalAmtFinanced = input1 + input2  - input3 + input4 + input5 + input6 + input7 + input8 + input9;

        if (totalAmtFinanced > max) {
            $('.total').text('The maximum is ' + max);
            $('.total1').val(40000);
        } else {
            $('.total').text(totalAmtFinanced);
            $('.total1').val(totalAmtFinanced);
        }
};
});

The Fiddle

Answer 1

我建议在正文上使用单个侦听器，并通过选择器进行过滤...

$("body").on("keyup", "#gapInsurance,#foo,#bar", function () {
    updateTotal();
});

将所有字段添加到一起或返回原始总和

1 个答案: