從點擊/更改函數中獲取更新後的變量值

Question

我遇到了一個問題，即使用兩個變量calPrice和tpPrice進行簡單加法。我首先定義變量，然後在點擊函數中獲取輸入數據並重新定義變量。所以，當我做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

假設這些陣列tpPrice和calPrice包含數字，您可以在這些點擊/更改事件處理程序的末尾對兩者進行總結和格式化。

在這個例子中 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。地圖（）：

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

  [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); 
} 

Answer 2

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

你的大部分語句都是jQuery的on(...)的函數調用，它將一個函數註冊爲事件的回調函數。一旦事件發生，您傳遞的功能就會運行。

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

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

---

除此之外，我認爲你的價格計算是錯誤的。您正在定義一個數組並將數據推入其中。這不會將這些值相加。在HTML中打印數組的內容將產生逗號分隔的值。你想要做的是將數據解析爲數字（例如浮點數）並將它們加在一起。

Answer 3

calPrice和tpPrice區域arrys。

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(); 
});