HTML
<body>
<div class="container mt-3">
<div class="card p-3">
<span class="name">상품명</span>
<span class="price">가격</span>
</div>
</div>
<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 form_hide">
</select>
</form>
<div id="test">
</div>
<script>
var cap = ['small', 'medium', 'large'];
var obj = {name : 'kim', age : 29};
$('.form-select').eq(0).on('click', function () {
// eq(number)는 배열의 number번째 요소를 불러옴
var value = $('.form-select').eq(0).val();
// .val()은 선택요소의 value값을 가져옴
var size_shirt_temple = `<option>95</option>
<option>100</option>`;
// ''사용시 줄바꿈하면 코드가 한번 끊겨서 실행 X, ``사용하면 줄바꿈해도 문제 없음
var size_bot_temple = `<option>28</option>
<option>30</option>`;
if (value == '셔츠') {
$('.form-select').eq(1).removeClass('form_hide');
// html코드 추가 방법1 (html 리셋 후 append를 사용해 코드 추가)
$('.form-select').eq(1).html(''); // 하단의 append를 제대로 사용하기 위해 html코드를 공백으로 수정
// .html()은 선택요소의 내부에 ()안 코드 추가해주는 기능
$('.form-select').eq(1).append(size_shirt_temple); //append사용 시 기존 코드들 없애는 과정이 필요
}
else if(value == '바지'){
$('.form-select').eq(1).removeClass('form_hide');
// html코드 추가 방법2 (html코드 전체 교체)
$('.form-select').eq(1).html(size_bot_temple);
}
else if(value == '모자'){
$('.form-select').eq(1).removeClass('form_hide');
$('.form-select').eq(1).html('');
// forEach는 배열에 쓸 수 있는 반복문 함수
// a는 배열 안에 있는 요소, i는 배열의 갯수만큼 반복하면서 숫자 상승 0 > 1 > 2..
cap.forEach(function(a, i){
$('.form-select').eq(1).append(`
<option>` + a + `</option>
`
);
});
}
});
for(var key in obj){
// key는 배열이 갖고 있는 key값
// console.log(key);
}
cap.forEach(function (a, i){
console.log(a);
});
// arrow function 사용 시 this값이 바깥의 this를 불러옴
// arrow function에서 파라미터가 하나면 ()생략 가능 [ex]function(a) {} >> a => {}
cap.forEach((a, i) => {
console.log(a);
});
</script>
<div class="container mt-5">
<ul class="list">
<li class="tab-button" data-id="0">Products</li>
<li class="tab-button orange" data-id="1">Information</li>
<li class="tab-button" data-id="2">Shipping</li>
</ul>
<div class="tab-content">
<p>상품설명입니다. Product</p>
</div>
<div class="tab-content show">
<p>스펙설명입니다. Information</p>
</div>
<div class="tab-content">
<p>배송정보입니다. Shipping</p>
</div>
</div>
<script>
var car2 = {
name: '소나타',
price: [50000, 3000, 40000]
}
document.querySelector('.price').innerHTML = car2.price[0]
// 배열.키[넘버]를 실행하면 배열에서 '키' 이름을 가진 값의 '넘버'번째 value를 가져옴
// console.log(car2['price']);
// document.querySelector('.name').innerHTML = car2.name;
// $('.name').text(car2.name);
// $('.price').text(car2.price);
</script>
</body>
사용된 문법
.eq(number) : 선택한 배열의 number번째 요소를 불러온다.
.val(...) : 선택한 요소의 value값을 가져온다.
변수에 값 할당 시 ""를 사용할 경우 줄 바꿈이 생기면 코드 진행이 끊기기 때문에 줄 바꿈을 이용할 경우 ``를 사용하기
.html(...) : 선택요소의 내부에 (...)안 코드를 교체해 준다.
.append(...) : 선택요소의 내부에 (...)안 코드를 추가해 준다.
.forEach(function(a, i){} : 배열에 쓸 수 있는 반복문 함수. a는 배열 안에 있는 요소, i는 배열의 개수만큼 반복하면서 숫자가 상승
arrow function : .forEach(function(a, i){} 는 .forEach((a, i) => {}와 같다. 파라미터가 하나라면 () 생략이 가능하다. [ex] function(a) {} >> a => {} arrow function에서는 this가 괄호 바깥의 값을 가져오기 때문에 주의해야 한다.
for(var key in ...) : 객체 반복문. key는 속성의 key값을 가져온다. ...는 객체명 자리.
배열의 value 가져오기 : [ex]car2.price[0]는 car2배열의 price라는 key값을 가진 속성의 0번째 value를 가져온다.
'🧑💻개발 > 아카이브' 카테고리의 다른 글
| [CSS]마우스 오버시 아이콘 등장 효과 (0) | 2023.07.21 |
|---|---|
| [JavaScript] 최소한의 코드로 D-Day 계산하기 (0) | 2023.07.13 |
| 정규식으로 이메일 검사하는 방법 (0) | 2023.06.27 |
| [CSS]스크롤 유도 애니메이션 (0) | 2023.06.26 |
| [CSS]Clip-path를 활용한 마우스오버 효과 (0) | 2023.06.25 |
