從點擊/更改功能內部獲取更新的變量值

Question

使用兩個變量calPrice和tpPrice進行簡單加法時遇到問題。 我先定義變量，然后在click函數中從輸入中獲取數據並重新定義變量。 所以，當我做var totalPrice = calPrice + tpPrice; ，為什么新定義的值不打印任何內容？

假設單擊/更改函數運行后， calPrice的數據為10， tpPrice為5 ...為什么我的totalPrice變量不選擇這些值？

var calPrice;
var tpPrice;

$('.calendar-check').on('click', function() {
  calPrice = [];
  $('.calendar-check:checked').each(function() {
    calPrice.push($(this).data('cal-price'));
  });
  $('#pg-price-review').html("$ " + calPrice);
});

$('.tp-pack-check').on('change', function() {
  tpPrice = [];
  $('.tp-pack-check:checked').each(function() {
    tpPrice.push($(this).data('price'));
  });
  $('#tp-cost-review').html("$" + tpPrice);
});

var totalPrice = calPrice + tpPrice;
$('#package-review-total').html(totalPrice);

Answer 1

原因是代碼中的執行順序。

您的大多數語句都是jQuery on(...)函數調用，這些函數將函數注冊為事件的回調。 事件發生后，將運行您傳遞給您的函數。

您的var totalPrice = calPrice + tpPrice; 但是，當定義並注冊了所有事件偵聽器（但未觸發）時，第一行僅在開始時運行一次。

您需要做的是將最后兩行放入每個會更改變量calPrice或tpPrice 。 為了使事情更易於維護，請將這兩行放入一個名為updateTotal的新函數中，然后從其他函數中調用它。

---

除此之外，我認為您的價格計算有誤。 您正在定義一個數組並將數據推入其中。 這不會對值求和。 用HTML打印數組的內容將產生逗號分隔的值。 您寧願要做的就是將數據解析為數字（例如float）並將它們加在一起。

Answer 2

calPrice和tpPrice區域暫停。 您不能通過以下方式總計數組：

var totalPrice = calPrice + tpPrice;

也許：

var totalPrice = = 0;

for(var i = 0; i<= calPrice.length; i++)
  totalPrice += calPrice[i];

for(var j = 0; j<= tpPrice.length; j++)
  totalPrice += tpPrice[j];

編輯：按正確順序的完整代碼：

var calPrice = [];
var tpPrice = [];

function setTotal() {
    var totalPrice = = 0;

    for(var i = 0; i<= calPrice.length; i++)
      totalPrice += calPrice[i];

    for(var j = 0; j<= tpPrice.length; j++)
      totalPrice += tpPrice[j];

    $('#package-review-total').html(totalPrice);
}

$('.calendar-check').on('click', function() {
  calPrice = [];
  $('.calendar-check:checked').each(function() {
    calPrice.push($(this).data('cal-price'));
  });
  $('#pg-price-review').html("$ " + calPrice);
   setTotal();
});

$('.tp-pack-check').on('change', function() {
  tpPrice = [];
  $('.tp-pack-check:checked').each(function() {
    tpPrice.push($(this).data('price'));
  });
  $('#tp-cost-review').html("$" + tpPrice);
  setTotal();
});

Answer 3

假設這些數組tpPrice和calPrice包含數字，則可以在這些click / change事件處理程序的末尾進行匯總和格式化。

此外，在此示例中， Array.prototype.reduce（） ， Array.prototype.map（）和Array.prototype.join（）用於以下目的：

• Array.prototype.reduce（）：

  可以總結數字元素，例如：

   [1,2].reduce(function(a,b){return a+b;}, 0) => 3 

• Array.prototype.map（）：

  創建另一個可能包含不同元素的數組，例如

   [1.23, 4.56].map(function(ele){return '$'+ele; }) => ["$1.23", "$4.56"] 

• Array.prototype.join（）：

  可以將數組元素與某些符號結合在一起，例如

   [1,2].join("+") => "1+2" 

這可能對您有幫助：

var calPrice = [];
var tpPrice = [];
$('.calendar-check').on('click', function() {
  calPrice = [];
  $('.calendar-check:checked').each(function() {
    calPrice.push($(this).data('cal-price'));
  });
  var pgPrizeTotal = sumUpArray(calPrice);
  $('#pg-price-review').html('$'+pgPrizeTotal +' = '+ formatArray(calPrice));
  calcTotalPrize();
});

$('.tp-pack-check').on('change', function() {
  tpPrice = [];
  $('.tp-pack-check:checked').each(function() {
    tpPrice.push($(this).data('price'));
  });
  var tpPrizeTotal = sumUpArray(tpPrice);
  $('#tp-cost-review').html('$'+ tpPrizeTotal +' = '+ formatArray(tpPrice));
  calcTotalPrize();
});

function formatArray(array){
    return array.map(function(ele){return '$'+ele; }).join("+");
}

function sumUpArray(array){
    return array.reduce(function(a,b){return a+b;}, 0);
}

function calcTotalPrize(){
    var totalPrice = sumUpArray(calPrice) + sumUpArray(tpPrice);
    $('#package-review-total').html('$'+ totalPrice);
}