👉포스메뉴 개수 변경

정말로 프로젝트하면서 이부분을 하면서 아주 고통스러웠던 기억이지만, 이상하게 글을 작성하는 지금도 선명하다.

목적: 갯수를 변경했을 때 주문개수와 결제금액이 변경한 값이 들어가야된다.

그렇게 하기 위해서는 처음에 입력 되있는 개수 값을 담을 수만 있다면 처리 할 수 있다. 하지만 내가 개수를 클릭하게 되면 내가 변경한 값에서만 담을 수 있었지, 그전 값을 담는 데 계속 실패했다. 그렇게 3시간 정도 삽질을 한 후에야 구글에 검색해볼까 ? 라는 생각을 떠올렸다.
검색 하자마자 바로 방법을 발견했다.
바로 focus 함수를 이용하는 것이다.

focus: The focus() method is used to give focus to an element (if it can be focused).
요소에 초점을 맞출 때 사용합니다.
출처 : https://www.w3schools.com/

그래서 내가 갯수를 변경 시에 클릭하게 되면 foucs되는데 그때의 갯수를 변수에 담는 방법이였다.

	//셀렉트에서 주문 갯
		$("body .ord_area").on("focus",".ord_cnt",function(){
		//전 갯수 적용
			if(ordResCnt > 0){
				
				var preCnt = ($(this).val() * 1); // 변경 전 갯수
				ordMoney = ($(this).parent().parent().children().eq(2).children().val() * 1);
			
				ordResCnt -= preCnt; // 총 갯수에서 제외
				ordPrice = ordMoney * preCnt; // 갯수 * 금액
				
				//결제금액 넣어주기
				ordResPay -= ordPrice;
				
				ordPay();
			
				}
		
			}).on("change",".ord_cnt",function(){
				//바뀐 갯수 적용
				var nowCnt = ($(this).val() * 1); // 변경 후 갯수
					ordMoney = ($(this).parent().parent().children().eq(2).children().val() * 1);
					ordResCnt += nowCnt; // 총 갯수에서 제외
					ordPrice = ordMoney * nowCnt; // 갯수 * 금액
				
				 //결제금액 넣어주기
					ordResPay += ordPrice;
					ordPay();
				
				$(".ord_cnt").blur(); //focus 제거
		});
		

그 다음 해결해야 되는 문제는 내가 선택한 값을 담는 방법이였다.
그 문제는 change 함수로 해결했다.

change: 제이쿼리 change 이벤트의 경우 셀렉터를 정하여 해당 셀렉터의 값이 변할경우 변화를 캐치하는 이벤트입니다.
출처: https://dion-ko.tistory.com/73

나의 경우 .ord_cnt은 select의 클래스명이고, 그래도 .ord_cnt의 값이 바뀌면 change함수가 실행 되 변수에 담을 수 있는 것이다.

변경 후

하지만 이코드에 대해서는 치명적인 단점이 존재한다.
바로 내가 포커스하고 난뒤 갯수를 변경하지만 않으면 전에 개수 담아서 처리가 되지만 바뀐 값이 없어 그냥 빼기만 된다. 아래사진 참고하시면 편하다.

프로젝트 기간동안 시간이 부족해서 발견해도 처리못했지만, 언젠가 시간을 가지고 꼭처리해야할 문제다.