탭기능 만들기 반복문 이해

[김아정]

제가 이해한게 맞는지 잘 모르겠어서..  질문합니다!

for (let i = 0; i < $('.tab-button').length; i++) {
 $('.tab-button').eq(i).click(function(){
 $('.tab-button').removeClass('active');
 $('.tab-content').removeClass('show');
 $('.tab-button').eq(i).addClass('active');
 $('.tab-content').eq(i).addClass('show');
});
}

제가 처음 이해 안되었던 부분은  js에서 위코드를 만나면 for문은 0~2까지 돌텐데?

만약 사용자가 0번째 박스를 클릭하면 이후에 i++이니 1번째 박스

밖에 클릭을 못하는 것 아닌가?? 라는 생각에  왜 이렇게 작동하는걸까 계속 방황했습니다 ㅠㅠ

 

다시 이해 한 반복문은, 사용자가 클릭했을 때, 

원래 계속! 돌고있던 for문 안에서 클릭이벤트를 감지하여 클릭이벤트 안에 코드가 실행되는것?

이 맞는지 궁금합니다.. 기초적인 질문이라 너무 죄송합니다!

 

 

[codingapple]

for 저거는 그냥 안에 있는 코드를 3번 ctrl+c / ctrl+v 복붙하는 문법이라고 생각하면 쉽습니다 

복붙할 때마다 i를 0,1,2로 바꾼 다음에 복붙해줍니다 

 

0번째 버튼을 누르면 

$(‘.tab-button’).removeClass(‘active’);
$(‘.tab-content’).removeClass(‘show’);
$(‘.tab-button’).eq(0).addClass(‘active’);
$(‘.tab-content’).eq(0).addClass(‘show’);

이거 4줄의 코드가 동작하겠네요 

[김아정]

아아ㅠ 제가 너무 어렵게 생각하고있었네요! 정말 감사합니다 ㅠㅠ

[글쓴이]

글