JS-함수로 축약하기

함수로 축약하기

for (let i = 0; i < 3; i++){
    $('.tab-button').eq(i).on('click', function(){
        $('.tab-button').removeClass('orange');
        $('.tab-button').eq(i).addClass('orange');
        $('.tab-button').removeClass('show');
        $('.tab-button').eq(i).addClass('show');
    });
}

위의 긴 반복문을 함수로 축약하려면, 아래처럼 축약하면 될것같지만 작동이 안된다.

function 탭열기(){
    $('.tab-button').removeClass('orange');
    $('.tab-button').eq(i).addClass('orange');
    $('.tab-button').removeClass('show');
    $('.tab-button').eq(i).addClass('show');
}

이유는?

함수 안에 변수가 발견 되면, 변수를 아래와 같이 파라미터로(i를 num으로) 바꿔줘야 잘 작동합니다.

for (let i = 0; i < 3; i++){
    $('.tab-button').eq(i).on('click', function(){
        탭열기(i)
    });
}


function 탭열기(num){
    $('.tab-button').removeClass('orange');
    $('.tab-button').eq(num).addClass('orange');
    $('.tab-button').removeClass('show');
    $('.tab-button').eq(num).addClass('show');
}