🔕포스메뉴 취소

주문했던 메뉴를 취소 시에 변경해야 했던 것에 대한 글이다.

메뉴 취소

취소 클릭 전

취소 클릭 후

목적 : 취소를 클릭하면 그에 따라 주문개수와 금액도 변경되야한다.

필요한 전역 변수
var ordResCnt = 0 ; //총 주문 갯수
var ordResPay = 0 ; // 총 주문금액

초기버전

//주문 취소
	$(".ord_area").on("click",".choice_cnl",function(){
		
		//취소 시 갯수 제거
		ordResCnt -= $(this).parent().parent().children().children().eq(3).val();
		
		//취소 시 금액 마이너스
		ordResPay -= ($(this).parent().parent().children().children().eq(3).val() * 
				$(this).parent().parent().children().children().eq(2).val()	)
		//주문 제거
		$(this).parent().parent().remove();
		
		ordPay(); // 총 주문개수와 결제금액 변경에 의해서 다시 그려준다.
		cnt--;
		
	});

수정버전

//주문 취소
		var mCnt = 0; //취소 갯수
		var mPrice = 0; // 취소 가격
	$(".ord_area").on("click",".choice_cnl",function(){
		console.log("취소시 총갯수"+ordResCnt);
		console.log("취소시 총금액"+ordResPay);
		//취소 갯수
			 mCnt=$(this).parent().parent().children().eq(3).children().val();
			console.log("mCnt "+mCnt);
		//취소 가격
			 mPrice = $(this).parent().parent().children().eq(2).children().val();
			console.log("mPrice"+mPrice);
		
		//취소 시 갯수 제거
			if(nowCnt != 0){
			ordResCnt -= mCnt;
		
		//취소 시 금액 마이너스
			ordResPay -= mCnt * mPrice 
				
		//주문 제거
			$(this).parent().parent().remove();
		
		//금액 변경 상황 그려주기
			ordPay();
		
		//취소 주문 메뉴
			cnlM =$(this).parent().parent().attr("mno");
		
		//현재 주문개수 빼기
			
				nowCnt--;
		
			} else{
				// 총주문개수, 결제금액 초기화
				ordResPay = 0;
				ordResCnt = 0;
			}
		
		//주문 입니다 다시 돌려 놓기 필요없어졌지만, 살려놓자 공부용, 셀렉터 공부용
		//$(".menu_area input[type='button'][mno='" + cnlM + "']").attr("class","menu_name");
      
		
	});

.choice_cnl은 취소버튼의 클래스명 이고 내가 취소를 누른 것의 값만 마이너스 처리를 위해 this를 사용했고, 처음에 취소 갯수와 금액에 변수를 따로 만들지않고 parent()와 children()을 남발한 코드를 사용했더니 ,나중에 나와 다른사람이 이 코드를 봤을 때 이해할 수 있을까? 라는 생각이 들어서 바로 변수를 만들어 사용했다. 이때부터 변수와 주석을 열심히 달기 시작했다. 나와 모두를 위해서