자바스크립트 기초 (6)

코딩애플(https://codingapple.com/course/javascript-jquery-ui/)에서 강의를 듣고 공부 목적으로 적은 정리글입니다.

탭 구조

1. ul li로 버튼 3개를 만듬
2. div 박스 3개를 만듬
3. 버튼1 누르면 박스1이 보이도록, 버튼2 누르면 박스2가 보이도록, 버튼3 누르면 버튼3이 보이도록 만들기

 <div class="container mt-5">
    <ul class="list">
      <li class="tab-button">Products</li>
      <li class="tab-button orange">Information</li>
      <li class="tab-button">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>
    //모든버튼에 붙은 orange 클래스명 제거 
    //버튼0 누르면 orange 클래스명 추가
    //모든 div에 붙은 show 클래스명 제거
    //div0에 show클래스명 추가

    document.querySelectorAll('.tab-button')[0].addEventListener('click',function(){
      document.querySelectorAll('.tab-button')[0].classList.remove('orange');
      document.querySelectorAll('.tab-button')[1].classList.remove('orange');
      document.querySelectorAll('.tab-button')[2].classList.remove('orange');
      document.querySelectorAll('.tab-button')[0].classList.add('orange')
      document.querySelectorAll('.tab-content')[0].classList.remove('show');
      document.querySelectorAll('.tab-content')[1].classList.remove('show');
      document.querySelectorAll('.tab-content')[2].classList.remove('show');
      document.querySelectorAll('.tab-content')[0].classList.add('show')
    })
    document.querySelectorAll('.tab-button')[1].addEventListener('click',function(){
      document.querySelectorAll('.tab-button')[0].classList.remove('orange');
      document.querySelectorAll('.tab-button')[1].classList.remove('orange');
      document.querySelectorAll('.tab-button')[2].classList.remove('orange');
      document.querySelectorAll('.tab-button')[1].classList.add('orange')
      document.querySelectorAll('.tab-content')[0].classList.remove('show');
      document.querySelectorAll('.tab-content')[1].classList.remove('show');
      document.querySelectorAll('.tab-content')[2].classList.remove('show');
      document.querySelectorAll('.tab-content')[1].classList.add('show')
    })
    document.querySelectorAll('.tab-button')[2].addEventListener('click',function(){
      document.querySelectorAll('.tab-button')[0].classList.remove('orange');
      document.querySelectorAll('.tab-button')[1].classList.remove('orange');
      document.querySelectorAll('.tab-button')[2].classList.remove('orange');
      document.querySelectorAll('.tab-button')[2].classList.add('orange')
      document.querySelectorAll('.tab-content')[0].classList.remove('show');
      document.querySelectorAll('.tab-content')[1].classList.remove('show');
      document.querySelectorAll('.tab-content')[2].classList.remove('show');
      document.querySelectorAll('.tab-content')[2].classList.add('show')
    })
  </script>

☞ 강의에서는 주로 제이쿼리를 많이 설명을 해준다. 그렇지만 꾸역꾸역 바닐라 JS로 하는 연습을 하고 있는데 이게 잘하는건지 가끔 헷갈린다.

var 버튼 = $('.tab-button');

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


버튼.eq(1).on('click', function(){
  버튼.removeClass('orange');
  버튼.eq(1).addClass('orange');
  $('.tab-content').removeClass('show');
  $('.tab-content').eq(1).addClass('show');



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

☞ 위에는 바닐라 JS, 아래는 제이쿼리. 제이쿼리는 클래스 삭제도 하나로 간편하다. 자바스크립트로는 내가 아는 선에서 구현은 저런식으로 전부다 삭제처리를 해야한다. 코드길이만 봐도 바닐라가 비효율적이란 생각이 조금은 든다.

for 반복문

  for(let i = 0; i < 3; i++){
      console.log('안녕')
    }

반복문은 var이 아니라 let을 써야 작동함.

    for(let i = 0; i < 3; i++){
      document.querySelectorAll('.tab-button')[i].addEventListener('click',function(){
      document.querySelectorAll('.tab-button')[0].classList.remove('orange');
      document.querySelectorAll('.tab-button')[1].classList.remove('orange');
      document.querySelectorAll('.tab-button')[2].classList.remove('orange');
      document.querySelectorAll('.tab-button')[i].classList.add('orange')
      document.querySelectorAll('.tab-content')[0].classList.remove('show');
      document.querySelectorAll('.tab-content')[1].classList.remove('show');
      document.querySelectorAll('.tab-content')[2].classList.remove('show');
      document.querySelectorAll('.tab-content')[i].classList.add('show')
    })
    }

제이쿼리로 하고싶으면 아래처럼

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');
  })

});

오늘의 한줄평 : 어려웠던 반복문을 더 쉽게 잘 알 수 있어서 좋았다.

출처 : 코딩애플 https://codingapple.com/course/javascript-jquery-ui