Получение обновленного значения переменной из функции щелчка / изменения

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 содержат числа, вы можете суммировать и форматировать оба в конце этих обработчиков событий 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);
}

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