클릭/변경 함수 내에서 업데이트 된 변수 값 얻기

Question

calPrice 및 tpPrice의 두 변수를 사용하여 간단한 덧셈을 수행하는 데 문제가 있습니다. 변수를 먼저 정의한 다음 클릭 함수 내에서 입력 데이터를 가져오고 변수를 다시 정의합니다. 그래서, 내가 var totalPrice = calPrice + tpPrice; 할 때, 왜 새로운 정의 된 값이 아무것도 인쇄되지 않을까요?

왜 내 totalPrice 변수가이 값을 선택하지 않습니다 ... 이제 calPrice에 대한 데이터가 클릭/변경 기능이 실행되면 10 tpPrice 5입니다 가정 해 봅시다?

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 숫자가 포함 된 경우 해당 클릭/변경 이벤트 처리기의 끝에서 두 가지를 합산하고 형식을 지정할 수 있습니다.

• Array.prototype.reduce() :

  [1,2].reduce(function(a,b){return a+b;}, 0) => 3 
  

  :

  같은 숫자 요소를 요약 할 예 Array.prototype.reduce(), Array.prototype.map() 및 Array.prototype.join()에서 또한

  목적 다음에 사용

• 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의 on(...) 함수 호출로 이벤트에 대한 콜백 함수를 등록합니다. 이벤트가 발생하면 거기에서 전달하는 함수가 실행됩니다.

그러나 귀하의 var totalPrice = calPrice + tpPrice; 행은 모든 이벤트 리스너가 정의 및 등록 (트리거되지 않음) 될 때 한 번만 실행됩니다.

당신이해야 할 일은 변수 calPrice 또는 tpPrice 중 하나를 변경하는 모든 함수에 마지막 두 줄을 넣는 것입니다. 일을 더 유지하기 쉽게하려면이 두 줄을 updateTotal이라는 새 함수에 넣고 다른 함수 내에서 호출하십시오.

---

귀하의 가격 계산이 잘못되었다고 생각합니다. 배열을 정의하고 데이터를 배열에 넣고 있습니다. 이것은 값을 합산하지 않습니다. 배열 내용을 HTML로 인쇄하면 쉼표로 구분 된 값이됩니다. 오히려 원하는 것은 데이터를 숫자 (예 : float)로 파싱하여 함께 추가하는 것입니다.

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