๐Ÿ‘‰ํฌ์Šค๋ฉ”๋‰ด ๊ฐœ์ˆ˜ ๋ณ€๊ฒฝ

์ •๋ง๋กœ ํ”„๋กœ์ ํŠธํ•˜๋ฉด์„œ ์ด๋ถ€๋ถ„์„ ํ•˜๋ฉด์„œ ์•„์ฃผ ๊ณ ํ†ต์Šค๋Ÿฌ์› ๋˜ ๊ธฐ์–ต์ด์ง€๋งŒ, ์ด์ƒํ•˜๊ฒŒ ๊ธ€์„ ์ž‘์„ฑํ•˜๋Š” ์ง€๊ธˆ๋„ ์„ ๋ช…ํ•˜๋‹ค.


๋ชฉ์ : ๊ฐฏ์ˆ˜๋ฅผ ๋ณ€๊ฒฝํ–ˆ์„ ๋•Œ ์ฃผ๋ฌธ๊ฐœ์ˆ˜์™€ ๊ฒฐ์ œ๊ธˆ์•ก์ด ๋ณ€๊ฒฝํ•œ ๊ฐ’์ด ๋“ค์–ด๊ฐ€์•ผ๋œ๋‹ค.

๊ทธ๋ ‡๊ฒŒ ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ์ฒ˜์Œ์— ์ž…๋ ฅ ๋˜์žˆ๋Š” ๊ฐœ์ˆ˜ ๊ฐ’์„ ๋‹ด์„ ์ˆ˜๋งŒ ์žˆ๋‹ค๋ฉด ์ฒ˜๋ฆฌ ํ•  ์ˆ˜ ์žˆ๋‹ค. ํ•˜์ง€๋งŒ ๋‚ด๊ฐ€ ๊ฐœ์ˆ˜๋ฅผ ํด๋ฆญํ•˜๊ฒŒ ๋˜๋ฉด ๋‚ด๊ฐ€ ๋ณ€๊ฒฝํ•œ ๊ฐ’์—์„œ๋งŒ ๋‹ด์„ ์ˆ˜ ์žˆ์—ˆ์ง€, ๊ทธ์ „ ๊ฐ’์„ ๋‹ด๋Š” ๋ฐ ๊ณ„์† ์‹คํŒจํ–ˆ๋‹ค. ๊ทธ๋ ‡๊ฒŒ 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ํ•จ์ˆ˜๊ฐ€ ์‹คํ–‰ ๋˜ ๋ณ€์ˆ˜์— ๋‹ด์„ ์ˆ˜ ์žˆ๋Š” ๊ฒƒ์ด๋‹ค.

๋ณ€๊ฒฝ ํ›„

ํ•˜์ง€๋งŒ ์ด์ฝ”๋“œ์— ๋Œ€ํ•ด์„œ๋Š” ์น˜๋ช…์ ์ธ ๋‹จ์ ์ด ์กด์žฌํ•œ๋‹ค.
๋ฐ”๋กœ ๋‚ด๊ฐ€ ํฌ์ปค์Šคํ•˜๊ณ  ๋‚œ๋’ค ๊ฐฏ์ˆ˜๋ฅผ ๋ณ€๊ฒฝํ•˜์ง€๋งŒ ์•Š์œผ๋ฉด ์ „์— ๊ฐœ์ˆ˜ ๋‹ด์•„์„œ ์ฒ˜๋ฆฌ๊ฐ€ ๋˜์ง€๋งŒ ๋ฐ”๋€ ๊ฐ’์ด ์—†์–ด ๊ทธ๋ƒฅ ๋นผ๊ธฐ๋งŒ ๋œ๋‹ค. ์•„๋ž˜์‚ฌ์ง„ ์ฐธ๊ณ ํ•˜์‹œ๋ฉด ํŽธํ•˜๋‹ค.

ํ”„๋กœ์ ํŠธ ๊ธฐ๊ฐ„๋™์•ˆ ์‹œ๊ฐ„์ด ๋ถ€์กฑํ•ด์„œ ๋ฐœ๊ฒฌํ•ด๋„ ์ฒ˜๋ฆฌ๋ชปํ–ˆ์ง€๋งŒ, ์–ธ์  ๊ฐ€ ์‹œ๊ฐ„์„ ๊ฐ€์ง€๊ณ  ๊ผญ์ฒ˜๋ฆฌํ•ด์•ผํ•  ๋ฌธ์ œ๋‹ค.

์ข‹์€ ์›นํŽ˜์ด์ง€ ์ฆ๊ฒจ์ฐพ๊ธฐ