합계 스크립트
본문
이런식으로 각각 셀렉트 선택을 하면
이렇게 합계를 시키고자 하는데 셀렉트한 상품의 금액이 번갈아 가면서 나오는데요.
각 상품을 셀렉트 할때 마다 금액이 더해졌으면 합니다.
어떻게 수정해야 할까요..
var total = Number($(".frm_total").text()) + Number(result);
이렇게 하니까 하나의 상품 셀렉트로 수량을 바꿀대마다 합계가 되서 안되구요..
아래 볼드처리부분만 수정이 되면 될듯 합니다.
$(".qty_<?php echo $i ?>").change(function(){
var qty = Number($(".qty_<?php echo $i ?> option:selected").val());
var price = Number($(".qty_<?php echo $i ?>").attr('data-price'));
var result = Number(price * qty);
$(".frm_total").text(result);
var total = Number($(".frm_total").text(result));
total++
});
골라담기 총금액 <span class="frm_total">0</span> 원
답변 2
코드를 보니 상품 개수만큼 코드가 반복되겠군요.
반복문 내에서의 코드는 제거하고, 아래 코드면 되겠네요.
$('select[class^=qty_]').change(function() { // 뭐가 되었든 클래스명이 qty_로 시작하는 셀렉트박스 값이 변경되면
var total = 0;
$('select[class^=qty_]').each(function() { // 위와 마찬가지로 이에 해당하는 전체 셀렉트박스를 돌며
var qty = Number($(this).find('option:selected').val()); // 수량 구하고
var price = Number($(this).data('price')); // 가격 구하고
total+= qty*price; // 둘을 곱한 값을 더해줘서
});
$('.frm_total').text(total); // 골라담기 총금액에 넣어주면 끝.
});
// 참고로 가격 깔끔하게….
$('.frm_total').text(new Intl.NumberFormat().format(total)); // 1234 → 1,234
+ Intl.NumberFormat
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
- https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
말씀하신대로 적용해봤는데 동일하네요...
하나씩 했다고 치면 합산이 되어야 하는데 해당 셀렉트 금액만 번갈아 가면서 나오네요..
기존 반복 코드 삭제한 것 맞아요?
댓글의 코드는 마지막에 1번만 출력되면 되고요.
말씀해주신 코드로 대체 했습니다.
목록이니..for문 안에 있어서
.qty_<?php echo $i ?> 이걸 써야 각 상품별로 작동이 되서 이걸로면 수정했거든요
그러니까, '반복문' 내에서 질문의 계산 코드가 들어가면 안됩니다.
반복문 내에서의 스크립트는 삭제하거나 주석 처리하고,
반복문 끝나고 나서 댓글에 남긴 스크립트만 추가해주면 됩니다.
아! 네 제가 클래스부분 반복함수를 그대로 둬서 인식을 못했던 거였네요.. 잘 됩니다.^^
그런데 "선택해제" 를 클릭 하면 반대로 금액을 빼야 하는데
total -= qty*price; 이렇게 앞에 마이너스 처리 하면 반대로 되는게 맞을까요?
"선택하기"는 셀렉트박스가 나오겠고,
"선택해제"는 이를 다시 숨기고, 선택하기 버튼이 나오도록 하는건가요?
어쨌거나, 아래 부분의 코드 내에서 어떤 상태인지 확인해서 처리하면 됩니다.
아래 계산하는 부분을 따로 빼서,
셀렉트박스 변경되거나, 선택해제, 선택하기 등에서 호출하면 편하겠네요.
$('select[class^=qty_]').each(function() { // 위와 마찬가지로 이에 해당하는 전체 셀렉트박스를 돌며
// 수량 셀렉트박스가 보이는 등 선택 가능한 상태인지 여부 파악
if ( 수량선택가능상태 ) {
var qty = Number($(this).find('option:selected').val()); // 수량 구하고
var price = Number($(this).data('price')); // 가격 구하고
total+= qty*price; // 둘을 곱한 값을 더해줘서
}
});
