티스토리 뷰
반응형
for 반복문
비슷한 코드 복붙 안해도됨, 코드 반복실행 하는 것
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
$('.tab-button').eq(0).on('click',function(){ // .eq(n) : 왼쪽의 n번째
$('.tab-button').removeClass('orange');
$('.tab-button').eq(0).addClass('orange');
$('.tab-content').removeClass('show');
$('.tab-content').eq(0).addClass('show');
})
$('.tab-button').eq(1).on('click',function(){
$('.tab-button').removeClass('orange');
$('.tab-button').eq(1).addClass('orange');
$('.tab-content').removeClass('show');
$('.tab-content').eq(1).addClass('show');
})
$('.tab-button').eq(2).on('click',function(){
$('.tab-button').removeClass('orange');
$('.tab-button').eq(2).addClass('orange');
$('.tab-content').removeClass('show');
$('.tab-content').eq(2).addClass('show');
})
|
cs |
좋은습관 : 자주 쓰는 셀렉터 변수에 넣어쓰기 (성능 좋아짐)
(셀렉터 문법 자체가 느리게 실행돼서 자주쓰면 성능적으로 안좋음)
|
1
|
var tab_btn = $('.tab-button');
|
cs |
for 반복문 쓰는법
|
1
2
3
|
for(시작; 조건; 끝) {복붙할 코드}
|
cs |
|
1
2
3
|
for (let i = 0; i<10; i++) {
alert(i);
}
|
cs |
시작은 let i = 0으로 하고, 조건은 i<10이고, 끝은 i++
for문 돌기전에 i=0으로 시작i<10의 조건 맞을때 까지 i++ 실행
*반복문 쓸때 변수 let으로 선언
|
1
2
3
4
5
6
7
8
9
10
11
12
|
var tab_btn = $('.tab-button'); //자주쓰는 셀렉터는 변수에 넣어 쓰기(성능적으로 좋음)
var tab_con = $('.tab-content');
for(let i = 0; i<3; i++){ //i=0부터 시작해서 i=3이되면 반복 멈춤, 반복문 쓸때 let 넣어야 정확히 반복됨
tab_btn.eq(i).on('click',function(){ // .eq(n) : 왼쪽의 n번째
tab_btn.removeClass('orange');
tab_btn.eq(i).addClass('orange');
tab_con.removeClass('show');
tab_con.eq(i).addClass('show');
});
|
cs |
반응형
'Coding > javascript' 카테고리의 다른 글
| [JavaScript] - 이벤트 버블링 응용과 dataset (0) | 2023.01.04 |
|---|---|
| [JavaScript] 이벤트 버블링, 이벤트리스너 관련 함수 (0) | 2023.01.04 |
| [JavaScript] 스크롤 이벤트 (0) | 2023.01.02 |
| [JavaScript] 함수의 return 문법 & 소수점 다루기 (0) | 2023.01.01 |
| [JavaScript] 정규식으로 이메일 형식 검증해보기 (0) | 2023.01.01 |
댓글