从点击/更改功能内部获取更新的变量值

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