javascript - 从单击/更改函数中获取更新的变量值

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

原因是代码中的执行顺序。

您的大部分语句都是 jQuery 的 on(...) 的函数调用，它将函数注册为事件回调。一旦事件发生，您传递到那里的函数就会运行。

然而，您的 var totalPrice = calPrice + tpPrice; 行在开始时运行一次，此时所有事件监听器都已定义和注册(但未触发)。

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

---

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