탭메뉴 안 슬라이드

[이지환]

탭 메뉴 안에서 각각의 슬라이드를 조절할 수 있는 코드를 작성중입니다.
그런데 다른 함수에서 변경된 currentIdx 값을 다른 함수에 전달하고 싶은데 어떻게 해야하나요?

let currentIdx = 0; //초기 인덱스 값
  let pageNum = 1; //초기 슬라이드 페이지 값
  let slideNum = 0;
  let tabMenu = document.querySelector('.tab'); //탭 메뉴
  let tabContentEle = document.querySelectorAll('.content-item'); //탭 컨텐츠
  let currentPageNum = document.querySelectorAll('.pagination .current'); //슬라이드 현재 페이지 번호
  let totalPageNum = document.querySelectorAll('.pagination .total');
  //슬라이드 전체 페이지 숫자
  let tabSlideNum = document.querySelectorAll('.slide-opt .pagination'); //
  let slideRail = document.querySelectorAll('.slide-rail'); //슬라이드 담긴 태그 (슬라이드를 움직일 때 사용)
  let slideBtn = document.querySelectorAll('.slide-opt .btn-group'); //슬라이드 버튼 담긴 태그

  //슬라이드 초기값 설정
  function slideInit() {
    for (let i = 0; i < slideRail.length; i++) {
      //각 탭별 슬라이드 페이지 넘버링
      currentPageNum[i].innerHTML = pageNum;
      totalPageNum[i].innerHTML = slideRail[i].children.length;
    }
  }

  //선택되는 탭에 따라 내용 보여지기
  function selectTab(el) {
    let whichTab = el.target; //선택한 탭이 무엇인지?
    currentIdx = whichTab.getAttribute('data-index'); //선택한 탭의 인덱스 값
    if (whichTab.tagName == 'NAV') {
      return;
    }
    for (let i = 0; i < tabContentEle.length; i++) {
      tabMenu.children[i].classList.remove('active');
      tabContentEle[i].classList.remove('visible');
    }
    whichTab.classList.add('active');
    tabContentEle[currentIdx].classList.add('visible');
  }

  function tabSlide(e) {
    let selectBtn = e.target;
    if (selectBtn.classList.contains('prev')) {
      if (slideNum == 0) {
        return (slideNum = 0);
      } else {
        slideNum--;
      }
      //Slide 이동
      slideRail[currentIdx].style.transform =
        'translateX(' + -slideNum * 100 + '%)';
    } else if (selectBtn.classList.contains('next')) {
      if (slideNum == totalPageNum[currentIdx].innerHTML - 1) {
        return;
      } else {
        slideNum++;
      }
      //Slide 이동
      slideRail[currentIdx].style.transform =
        'translateX(' + -slideNum * 100 + '%)';
    } else {
      e.preventDefault();
    }
  }

  slideBtn[currentIdx].addEventListener('click', (e) => {
    tabSlide(e);
  });

  window.onload = () => {
    slideInit();
  };

  tabMenu.addEventListener('click', (el) => {
    selectTab(el);
  });

[codingapple]

let currentIdx 는 바깥에 있는 변수같은데
바깥에 있는 변수는 아무 함수안에서나 자유롭게 사용가능합니다

[이지환]

그런데 다른 함수 안에서 값이 변경이 되는데 그 변경된 값을 다른 함수에 사용하고 싶습니다.
찾아보니 객체로 만들거나 파라미터로 전송하면 된다고 하는데 도통 이해가 되질 않네요.
좋은 예시를 알려주시면 참고해서 수정해볼게요.

[codingapple]

다른거 만질 필요 없이 다른 함수에서도 그냥쓰면 변경된 값이 나옵니다

[글쓴이]

글