将计算变量加在一起

Question

我正在创建一个价格表，其中我根据固定价格和他们选择的票数计算了两种票类型的小计价格。 这两个函数正在工作，因为他们应该。 之后我想通过将两个小计加在一起来计算总计。 我在做什么错？

<div class="row"> 
    <div class="ticket-cat"> 
    <div class="col-xs-2"> 
     <p id="price-adult" data-price="12.77">€ 12.77</p> 
    </div> 
    <div class="col-xs-2"> 
     <select class="tickets-selection form-control" value="0" name="ticket-select-adult" id="ticket-select-adult"> 
     <option value="0">0</option> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
     </select> 
    </div> 
    <div class="col-xs-3"> 
     <p id="adult-total" class="text-right"> 
     <span class="valuta hidden">€</span> 
     <span class="total"></span> 
     </p> 
    </div> 
    </div> 
</div> 
<div class="row"> 
    <div class="ticket-cat"> 
    <div class="col-xs-2"> 
     <p id="price-student" data-price="9.41">€ 9.41</p> 
    </div> 
    <div class="col-xs-2"> 
     <select class="tickets-selection form-control" value="0" name="ticket-select-student" id="ticket-select-student"> 
     <option value="0">0</option> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
     </select> 
    </div> 
    <div class="col-xs-3"> 
     <p id="student-total" class="text-right"> 
     <span class="valuta hidden">€</span> 
     <span class="total hidden"></span> 
     </p> 
    </div> 
    </div> 
</div> 

jQuery的

$(function() { 
    var $adultTotal = $("#adult-total .total"); 
    var adultPrice = parseFloat($("#price-adult").data("price")); 

    // Fixes NaN and calculates the total price for adult tickets 
    $('#ticket-select-adult').change(function() { 
     var adultTicketsCount = parseInt(this.value, 10); 
     var adultPriceTotal = isNaN(adultTicketsCount) ? 
      ' n/a ' : 
      (adultTicketsCount * adultPrice).toFixed(2); 
     $adultTotal.text(adultPriceTotal); 
    }); 

    var $studentTotal = $("#student-total .total"); 
    var studentPrice = parseFloat($("#price-student").data("price")); 

    // Fixes NaN and calculates the total price for student tickets 
    $('#ticket-select-student').change(function() { 
     var studentTicketsCount = parseInt(this.value, 10); 
     var studentPriceTotal = isNaN(studentTicketsCount) ? 
      ' n/a ' : 
      (studentTicketsCount * studentPrice).toFixed(2); 
     $studentTotal.text(studentPriceTotal); 
    }); 

    // Add together the variables 
    totalPriceTickets = 0; 
    totalPriceTickets = parseInt(adultPriceTotal) + parseInt(studentPriceTotal); 
    console.log(totalPriceTickets, "Hello, world!"); 

}); 

https://jsfiddle.net/mckeene/rLnv348x/

Answer 1

有些问题是由于变量的被淘汰的范围，所以我已经在上面定义了它们。总数的一个console.log()应显示每次值更改。这是你的另一个问题，总是在最初显示，而不是每次更改值。

$(function() { 
    var $adultTotal = $("#adult-total .total"); 
    var adultPrice = parseFloat($("#price-adult").data("price")); 
    var $studentTotal = $("#student-total .total"); 
    var studentPrice = parseFloat($("#price-student").data("price")); 
    var adultPriceTotal = 0; 
    var studentPriceTotal = 0; 
    var totalPriceTickets = null; 

    // Fixes NaN and calculates the total price for adult tickets 
    $('#ticket-select-adult').change(function() { 
     var adultTicketsCount = parseInt(this.value, 10); 
     adultPriceTotal = isNaN(adultTicketsCount) ? 
      0 : 
      (adultTicketsCount * adultPrice).toFixed(2); 
     $adultTotal.text(adultPriceTotal); 

     totalPriceTickets = calculateTotal(adultPriceTotal, studentPriceTotal); 
    }); 

    // Fixes NaN and calculates the total price for student tickets 
    $('#ticket-select-student').change(function() { 
     var studentTicketsCount = parseInt(this.value, 10); 
     studentPriceTotal = isNaN(studentTicketsCount) ? 
      0 : 
      (studentTicketsCount * studentPrice).toFixed(2); 
     $studentTotal.text(studentPriceTotal); 

     totalPriceTickets = calculateTotal(adultPriceTotal, studentPriceTotal); 
    }); 

    function calculateTotal(adultPriceTotal, studentPriceTotal) { 
     var total = parseInt(adultPriceTotal) + parseInt(studentPriceTotal); 

     console.log(total) 
     return total; 
    } 
});