[JS] for문 관련 메모 (2)

for 반복문

for (횟수){ 복붙할 코드 }

3회 반복

// 횟수 3회 반복
for (var i = 0; i < 3; i++) {
  console.log("안녕");
}

// i를 0부터 시작해서 / i에 1씩 더해가면서 복붙해라 / 근데 i < 3 까지

0, 1, 2 이렇게 3회 반복

3 - 0 = 3 으로 계산해도 됨. 

3 되기 전에 끝내기

---

for 반복문으로 탭기능 코드 줄여보기

$(".tab-button")
  .eq(0)
  .on("click", function () {
    $(".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");
  });

줄여보기

for 반복문 안에다가  코드를 복사 - 버튼 0 기능 갖고옴.

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

이 코드가 3번 반복되는데 

복붙할 때마다 0부분을 1로 바꾸고 2로 바꾸기

- 바뀌는 부분 체크

0 대신 반복문이 진행되며 0, 1, 2로 차례로 바뀌는 변수 넣기

for (var i = 0; i < 3; i++){

  $('.tab-button').eq(i).on('click', function(){
    $('.tab-button').removeClass('orange');
    $('.tab-button').eq(i).addClass('orange');
    $('.tab-content').removeClass('show');
    $('.tab-content').eq(i).addClass('show');
  })

});

i 로 자리 채워넣어줌

처음엔 eq() 자리에 0이 들어가고

i++ 되면서 1 이 들어가게 되고 2도 나중에 들어가게 됨.

for 반복문 사용할 때 변수를 var i 말고 let i로 바꿔야 잘됩니다

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-content").removeClass("show");
      $(".tab-content").eq(i).addClass("show");
    });
}

---

탭이 여러개로 바뀌어도 알아서 잘 동작하는 코드

여러개 찾아주는 셀렉터($) 로 html 요소 찾은 다음에 .length 붙이기

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

 

참고)
document -> 문서인데 여기선 html 웹문서
마침표 -> ~의 
getElementById('어쩌구') -> 아이디가 '어쩌구'인 html 요소 (일명 element) 를 찾으셈


document.querySelector => $


html 요소를 찾아주는 셀렉터 =
getElementById()
getElementsByClassName()

querySelector