배우는 것이 많아지니 정리할 곳이 필요하여, 늦었지만 지금이라도 꾸준히 배운것들을 기록하기 위해 만들었습니다!
<form class="container my-5 form-group">
<p>상품선택</p>
<select class="form-select mt-2">
<option>모자</option>
<option>셔츠</option>
<option>바지</option>
</select>
<select class="form-select mt-2 hide">
<option>95</option>
<option>100</option>
</select>
</form>
이 예제를 통하여 html삽입 및 다양한for문을 학습하였습니다.
항목를 선택하면 그 항목에 맞는 사이즈표를 드롭다운 하는 코드입니다.
★select태그에는 input과change이벤트가 발생합니다.
hide라는 클래스를 만들어서 클릭시 클래스를 제거하는 방식입니다.
<style>
.hide{
display: none;
}
</style>
하지만 미리 숨겨놨다 보여주는식은 확장성이 부족하므로 지양하도록 합시다!
JS코드로 html을 생성하여 필요한만큼 옵션태그를 만들어 적용하는 방식입니다.
간단한 코드로 예시를 들자면
var text = '<p>안녕</p>';
document.querySelector('#test').insertAdjacentHTML('beforeend', text);//안쪽밑에 '추가'
$('#test').append(text);
JS - insertAdjacentHTML()사용
jQuery - append()사용
JS - value()사용
JQuery - val()사용
var pants = [28, 30, 32, 34];
var shirts = [95, 100, 105];
$('.form-select').eq(0).on('input', function (e) {
var value = e.currentTarget.value
if (value == "셔츠") {
$('.form-select').eq(1).removeClass('hide');
$('.form-select').eq(1).html('');
shirts.forEach((a) => {
$(".form-select").eq(1).append(`<option>${a}</option>`)
})
}
else if (value == "바지") {
$('.form-select').eq(1).removeClass('hide');
$('.form-select').eq(1).html('');
pants.forEach((b, i) => {
$('.form-select').eq(1).append(`<option>${b}</option>`)
})
}
else {
$('.form-select').eq(1).addClass('hide');
}
})
코드설명 :
$('.form-select').eq(0)를 input했을때
'셔츠'를 선택하면 $('.form-select').eq(1)의 내용물을 다 지우고,
'shirts'리스트의 수만큼 option태그를 생성과동시에 데이터값을 순서대로 집어넣는 과정을 수행합니다.
('바지'선택시애도 동일한 과정을 수행)
'모자'선택시 사이즈표 hide클래스추가 (display:none)
일반적인 for문을 사용하면은
for(var i=0;i<pants.lenght;i++){
~~~
}
이지만 array는 forEach, object는 for in문을 사용합니다.
//array자료형
pants.forEach(function(a,i){
~~~
}
//object자료형
var obj = { name : 'kim', age : 20 }
for (var 작명 in obj){
console.log(작명)
}
funtion의 파라미터중 a는 pants의 데이터를 저장하고, i는 0부터 순차적으로 증가하는 정수를 저장합니다.
▼반복문의 용도▼
1.코드 반복작성
2.array나object의 데이터들을 다 꺼낼때 사용
$('.form-select').eq(0).on('input', function (e) {
var value = this.value
}
위 코드에서 function을 '=>(arrowFunction)'로 바꿔 쓸수있습니다.(ES6문법)
$('.form-select').eq(0).on('input',(e) => {
var value = this.value
}
다만 '=>'을 쓸경우 내부의 this를 재정의 하지않기 때문에 이벤트리스너가있는 경우 사용하지않는것을 권장합니다.
★e.currentTarget.value (=this)
ex)var value = this.value
위의 코드일땐 잘 실행되지만 밑의 코드일땐 내부의this를 재정의 하지 않기 떄문에 실행이 잘 안될수도 있습니다.