Javascript 从单击/更改函数内部获取更新的变量值

我在做两个变量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);

---

原因是代码中的执行顺序

您的大多数语句都是jQuery对。。。将函数注册为事件的回调。事件发生后，将运行传递到那里的函数

您的var totalPrice=calPrice+tpPrice；但是，当所有事件侦听器都已定义和注册但未触发时，行在开始时运行一次

您需要做的是将最后两行放入每个函数中，这些函数可以更改变量calPrice或tpPrice。为了使事情更易于维护，将这两行代码放入名为updateTotal的新函数中，并从其他函数中调用它

---

除此之外，我认为你们的价格计算是错误的。您正在定义一个数组并将数据推入其中。这不会对值求和。以HTML打印数组的内容将产生逗号分隔的值。您更希望做的是将数据解析为一个数字，例如float并将它们相加。

原因是代码中的执行顺序

您的大多数语句都是jQuery对。。。将函数注册为事件的回调。事件发生后，将运行传递到那里的函数

您的var totalPrice=calPrice+tpPrice；但是，当所有事件侦听器都已定义和注册但未触发时，行在开始时运行一次

您需要做的是将最后两行放入每个函数中，这些函数可以更改变量calPrice或tpPrice。为了使事情更易于维护，将这两行代码放入名为updateTotal的新函数中，并从其他函数中调用它

---

除此之外，我认为你们的价格计算是错误的。您正在定义一个数组并将数据推入其中。这不会对值求和。以HTML打印数组的内容将产生逗号分隔的值。您更希望做的是将数据解析为一个数字，例如float并将它们相加。

calPrice和tpPrice area 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();
});

---

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

---

假设这些数组tpPrice和calPrice包含数字，您可以在这些click/change事件处理程序的末尾汇总并格式化这两个数组

此外，在本例中，和用于以下目的：

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

---

假设这些数组tpPrice和calPrice包含数字，您可以在这些click/change事件处理程序的末尾汇总并格式化这两个数组

此外，在本例中，和用于以下目的：

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

---

为什么total price的代码不在事件处理程序中。在事件处理程序中更新值后，需要计算totalPrice。totalPrice的值在第一次求值后不会求值，这将是未定义的。只有当页面加载时，才会计算totalPrice的值，并且calPrice和tpPrice变量都为空。您需要在单击处理程序中计算该值。虽然您应该注意到这两个变量都包含数组，但我不确定您希望+运算符有什么行为，为什么total price的代码不在事件处理程序中。在事件处理程序中更新值后，需要计算totalPrice。totalPrice的值在第一次求值后不会求值，这将是未定义的。只有当页面加载时，才会计算totalPrice的值，并且calPrice和tpPrice变量都为空。您需要在单击处理程序中计算该值。尽管您应该注意到，这两个变量都包含数组，所以我不确定您希望+运算符具有什么行为以及根据Hube

---

rt Grzeskowiak必须在每次事件后调用此命令！根据Hubert Grzeskowiak的说法，这必须在每次活动后调用！这会产生以下错误：UncaughtTypeError:无法读取UndefinedIt的属性“reduce”：var calPrice=[]；var tpPrice=[]；根据我的回答，应该可以。可能不是问题，但是reduce只是IE9+的可比性，看看map函数做了什么？它创建了另一个数组，其中包含如下字符串：$1.23，$3.56。这些字符串最终与+连接在一起，这会产生以下错误：uncaughttypeerror:无法读取undefinedIt的属性“reduce”：var calPrice=[]；var tpPrice=[]；根据我的回答，应该可以。可能不是问题，但是reduce只是IE9+的可比性，看看map函数做了什么？它创建了另一个数组，其中包含如下字符串：$1.23，$3.56。最后，这些弦与+