从 click/change 函数内部获取更新的变量值

Question

我在使用两个变量 calPrice 和 tpPrice 进行简单加法运算时遇到问题。我首先定义变量，然后在点击函数中从输入获取数据并重新定义变量。那么，当我执行 var totalPrice = calPrice + tpPrice; 时，为什么新定义的值不打印任何内容？

假设 calPrice 的数据是 10，tpPrice 是 5 一旦 click/change 函数有运行...为什么我的 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 中数组的内容将产生逗号分隔的值。您更愿意做的是将数据解析为数字（例如浮点数）并将它们相加。

Answer 2

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

Answer 3

假设这些数组 tpPrice 和 calPrice 包含数字，你可以在那些 [=45] 的末尾总结和格式化=] event-handlers。

此外，在此示例中 Array.prototype.reduce(), Array.prototype.map() and 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; }) => [".23", ".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);
}

从 click/change 函数内部获取更新的变量值

Getting an updated variable value from inside a click/change function

javascript

jquery

function

onchange

click