4 글 보임 - 1 에서 4 까지 (총 4 중에서)
-
글쓴이글
-
2022년 7월 7일 10:49 #38177
이지환참가자탭 메뉴 안에서 각각의 슬라이드를 조절할 수 있는 코드를 작성중입니다. 그런데 다른 함수에서 변경된 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); });
2022년 7월 7일 14:54 #38200
codingapple키 마스터let currentIdx 는 바깥에 있는 변수같은데 바깥에 있는 변수는 아무 함수안에서나 자유롭게 사용가능합니다
-
글쓴이글
4 글 보임 - 1 에서 4 까지 (총 4 중에서)
- 답변은 로그인 후 가능합니다.