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

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.Карта():

  Создает другой массив, который может содержать различные элементы, как

  [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's on(...), которые регистрируют функцию как обратный вызов событий. Функция, с которой вы проходите, запускается после возникновения события.

Ваша линия var totalPrice = calPrice + tpPrice;, однако, запускается один раз в начале, когда все прослушиватели событий определены и зарегистрированы (но не активированы).

Что вам нужно сделать, это поместить последние две строки в каждую функцию, которая изменяет любую из ваших переменных calPrice или tpPrice. Чтобы сделать вещи более удобными, добавьте эти две строки в новую функцию, называемую updateTotal, и вызовите ее из других функций.

---

Помимо этого, думаю, ваш расчет цены неправильный. Вы определяете массив и вставляете в него данные. Это не суммирует значения. Распечатка содержимого массива в HTML даст значения, разделенные запятыми. То, что вы скорее хотите сделать, - это проанализировать данные как число (например, float) и добавить их вместе.

Answer 3

calPrice и tpЦена указателя поворота arrys. Вы не можете суммировать массивы по:

var totalPrice = calPrice + tpPrice; 

Maybe:

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]; 

Edit: Полный код в правильном порядке:

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