18. [jQuery] Interactive Form - forEach ver.

지난 포스팅에서는 인터랙티브 폼을 제작함에 있어서 조건문을 통해서 해당 HTML 코드를 변수에 담아 append 하는 것에 대해서 알아보았습니다. 

하지만 이런 방식은 하나의 option 이 추가 될 때 마다 하드코딩으로 직접 추가해주어야 하는 불편함이 있습니다. 

이를 해결 할 수 있는 방안으로 반복문을 통해서 해결 해 보겠습니다. 

 

https://daterminal.tistory.com/67

17. [jQuery] Interactive Form - 하드코딩 ver.

 

지난번 JQuery 코드

▷ 해당하는 option이 선택 될 때 마다 HTML 코드를 직접 작성하여 append 하는 방식을 취하고 있다. 

 $('#option1').on('change', function() {
            if ($('#option1').val() == '셔츠') {
                $('#option2').html(' '); // 다른 선택지를 선택했을 때 기존에 있던 선택지를 비워주는 코드
                var sizeTemplate = `
                    <option>95</option>
                    <option>100</option>
                    <option>105</option>
                    <option>110</option>
                `;
                $('.size-wrap').show();
                $('#option2').append(sizeTemplate);
            } else if ($('#option1').val() == '바지') {
                $('#option2').html(' ');
                var sizeTemplate = `
                    <option>28</option>
                    <option>30</option>
                    <option>32</option>
                `;
                $('.size-wrap').show();
                $('#option2').append(sizeTemplate);
            }
            else{
                $('.size-wrap').hide();
            }
        });

 

개선된 jQuery 코드 (forEach)

$('#option1').on('change', function() {
            if ($('#option1').val() == '셔츠') {
                var 셔츠사이즈 = [95, 100, 105, 110];
                $('#option2').html(' ');
                셔츠사이즈.forEach((value) => {
                    var sizeTemplate = `
                    <option>${value}</option>
                `;
                    $('#option2').append(sizeTemplate);
                })
                $('.size-wrap').show();

            } else if ($('#option1').val() == '바지') {
                var 바지사이즈 = [28, 30, 32, 34, 36];
                $('#option2').html(' ');
                바지사이즈.forEach((value) => {
                    var sizeTemplate = `
                    <option>${value}</option>
                `;
                    $('#option2').append(sizeTemplate);
                })
                $('.size-wrap').show();

            } else {
                $('.size-wrap').hide();
            }
        });

 

forEach

▷ 반드시 배열과 함께 사용되는 forEach 문법은 배열명.forEach() 로 사용됩니다.

 

▷ forEach는 for문을 조금 더 쉽게 접근 할 수 있도록 해주는 콜백함수 입니다.

 

▷ 첫번째 내부 인자로는 value

▷ 두번째 내부 인자로는 index 를 얻을 수 있습니다. 

 

암기 팁 ! V.I.(P)

var 바지사이즈 = [28, 30, 32, 34, 36];
	바지사이즈.forEach(function(value,index){
	console.log(value, index);
})

 

 

`(백틱) + ${ 변수 } 

바지사이즈 배열에 담긴 값을 forEach 를 통하여 순회하면서 value를 sizeTempalte의 html 코드에 중간에 value를 저장하기 위해서 ${ 변수 } 을 사용합니다. 

 

var 바지사이즈 = [28, 30, 32, 34, 36];
바지사이즈.forEach((value) => {
	var sizeTemplate = `
	<option>${value}</option>
	`;
    console.log(sizeTemplate); 
	$('#option2').append(sizeTemplate);
});

forEach를 통하여 option 태그 내에 값이 제대로 들어가 있음을 확인 할 수 있습니다.