• 로그인
  • 장바구니에 상품이 없습니다.

home2 게시판 JavaScript, TS 게시판 강사님 제이쿼리 코드를 javascript로 하고싶어서 하는중인데..

강사님 제이쿼리 코드를 javascript로 하고싶어서 하는중인데..

3 글 보임 - 1 에서 3 까지 (총 3 중에서)
  • 글쓴이
  • #62174

    정중식
    참가자
    $('.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');
    })
    
    
    위의 코드를 js코드로 하려고합니다.
    우선 remove를 아래와 같이 시도해봤는데
    main.js:15 Uncaught TypeError: Cannot read properties of undefined (reading 'remove')
    at HTMLLIElement.<anonymous> (main.js:15:31)
    이런 에러가 발생하네요
    
    
    document
      .querySelectorAll('.tab-button')[0]
      .addEventListener('click', function () {
        var div = document.getElementsByClassName('tab-button');
        console.log(div.classList.remove('orange'));
      });
    
    
    document
      .querySelectorAll('.tab-button')[0]
      .addEventListener('click', function () {
        var div = document.getElementsByClassName('tab-button')[1];
        console.log(div.classList.remove('orange'));
      });
    이런식으로 [1]을 써주면 잘 작동되기는 합니다만.. 제이쿼리처럼 모든 클래스명의 orange를 지우고싶은데 어떤 방법을써야할까요?
    검색실력도 하찮고 머리도 하찮아서 혼자 계속 붙잡고있어도 안되네요 ㅠ..ㅠ 죄송합니다
    
    
     
    #62176

    정중식
    참가자
    혹시 해당 클래스들에서 orange 클래스 전체 삭제 같은 코드는 존재하지않는건가요?
    
    이런식으로 짜봤는데 잘동작은 하는데 좀.. 하드코딩같아서요
    
    
    const tabBtn = document.querySelectorAll('.tab-button');
    const tabContent = document.querySelectorAll('.tab-content');
    tabBtn[0].addEventListener('click', function () {
      tabBtn[0].classList.remove('orange');
      tabBtn[1].classList.remove('orange');
      tabBtn[2].classList.remove('orange');
      tabBtn[0].classList.add('orange');
      tabContent[0].classList.remove('show');
      tabContent[1].classList.remove('show');
      tabContent[2].classList.remove('show');
      tabContent[0].classList.add('show');
    });
    
    헉헉;;
    #62193

    codingapple
    키 마스터
    쌩자바스크립트는 전체삭제 그런거 없어서 그렇게 하면 됩니다
3 글 보임 - 1 에서 3 까지 (총 3 중에서)
  • 답변은 로그인 후 가능합니다.

About

현재 월 700명 신규수강중입니다.

  (09:00~20:00) 빠른 상담은 카톡 플러스친구 코딩애플 (링크)
  admin@codingapple.com
  이용약관
ⓒ Codingapple, 강의 예제, 영상 복제 금지
top

© Codingapple, All rights reserved. 슈퍼로켓 에듀케이션 / 서울특별시 강동구 고덕로 19길 30 / 사업자등록번호 : 212-26-14752 온라인 교육학원업 / 통신판매업신고번호 : 제 2017-서울강동-0002 호 / 개인정보관리자 : 박종흠