[ JavaScript / jQuery ] 멀티페이지 구현

[ JavaScript / jQuery ] 멀티페이지 구현

2024. 5. 30. 18:51ㆍ· FRONT-END/└ JS

환경 : Visual Studio Code

[ 주요 코드 ]

.next(항목) 뒤 태그 선택 / .prev(항목) 앞 태그 선택
.parent(항목) 위 태그 선택 / .children(항목) 아래 태그 선택'

- 방법 1

    <script type="text/javascript">
        $(function(){
            //[1] 모든 페이지를 다 숨기고 1페이지 표시
            $(".page").hide().first().show();
            // $(".page").hide().eq(0).show();
            // $(".page:gt(0)").hide();//권장하지 않음(jQuery일 때만 됨)
            
            //[2] 다음 버튼을 누르면 버튼이 있는 페이지는 숨기고 다음 페이지를 표시
            $(".btn-next").click(function(){
                // $(this).parent(".page").hide().next(".page").show();//페이지 바로 밑에 버튼이 있어야 작동
                $(this).parents(".page").hide().next(".page").show();//페이지 내부에 버튼이 있으면 작동
            });

            //[3] 이전 버튼을 누르면 버튼이 있는 페이지는 숨기고 이전 페이지를 표시
            $(".btn-prev").click(function(){
                $(this).parents(".page").hide().prev(".page").show();
            });
       
        });
    </script>
</head>

//[1] 모든 페이지를 다 숨기고 1페이지 표시
$(".page").hide().first().show();
// $(".page").hide().eq(0).show();
// $(".page:gt(0)").hide();//권장하지 않음(jQuery일 때만 됨)

(+) 모든 페이지를 다 숨기고, 1번째 페이지를 표시하는 식을 한 번에 작성할 수 있다.

(+) 이에 대한 방법이 위와 같이 총 3가지이다.

//[2] 다음 버튼을 누르면 버튼이 있는 페이지는 숨기고 다음 페이지를 표시
$(".btn-next").click(function(){
     // $(this).parent(".page").hide().next(".page").show();//페이지 바로 밑에 버튼이 있어야 작동
     $(this).parents(".page").hide().next(".page").show();//페이지 내부에 버튼이 있으면 작동
});

(+) parent()와 parents() :
- parent()는 바로 밑 버튼 여부

- parents()는 페이지 내부에 버튼 여부

- 방법2

    <script type="text/javascript">
            $(".page").hide();
            $(".page:first").show();

            $(".btn-next").click(function(){
                $(this).parent().next(".page").show();
                $(this).parent().hide();
            });
            $(".btn-prev").click(function(){
                $(this).parent().prev(".page").show();
                $(this).parent().hide();
            });
        });
    </script>

- 방법1(업그레이드) : page 클래스 명을 지정하여 정확하게 만들기

    <script type="text/javascript">
        $(function(){
            //[1] 모든 페이지를 다 숨기고 1페이지 표시
            $(".page").hide().first().show();

            //(추가) 첫 번째 이전버튼과 마지막 다음버튼을 삭제
            $(".page").find(".btn-prev").first().remove();
            $(".page").find(".btn-next").last().remove();

            //[2] 다음 버튼을 누르면 버튼이 있는 페이지는 숨기고 다음 페이지를 표시
            $(".page").find(".btn-next").click(function(){
                $(this).parents(".page").hide().next(".page").show();//페이지 내부에 버튼이 있으면 작동
            });

            //[3] 이전 버튼을 누르면 버튼이 있는 페이지는 숨기고 이전 페이지를 표시
            $(".page").find(".btn-prev").click(function(){
                $(this).parents(".page").hide().prev(".page").show();
            });
            
        });
    </script>

(+) $(this)로 지정하게 되면, 다른 코드와 함께 사용할 때 정확하게 지정하기에 어려움이 발생할 수 있다.

→ 따라서 $(".page")와 같이 클래스 명을 지정하여 이를 활용하는 것이 더 바람직하다

- 추가 : 첫 페이지의 이전 버튼과 마지막페이지의 다음 버튼 삭제를 코드로 해보자

$(".page").find(".btn-prev").first().remove();
$(".page").find(".btn-next").last().remove();

(+) remove()를 사용한다

[ 전체 코드 ]

~~- page 클래스 명을 통하여 정확하게 지정해주기~~

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Javascript 예제</title>

    <!-- 구글 폰트 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap" rel="stylesheet">
     
    <!-- 내가 구현할 스타일 -->
    <link rel="stylesheet" type="text/css" href="../css/commons.css">
    <link rel="stylesheet" type="text/css" href="../css/test.css">
    
    <!-- font awesome 아이콘 CDN -->
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <style>
        
    </style>

    <!-- jquery cdn -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
    <!-- 내가 만든 스크립트 추가(jQuery를 사용했으니 jQuery CDN 아래 작성) -->
    <script src="commons.js"></script>
    <!-- javascript를 의도적으로 head 자리에 배치해서 가장 먼저 실행되도록 구현 -->
    <script type="text/javascript">
        $(function(){
            //[1] 모든 페이지를 다 숨기고 1페이지 표시
            $(".page").hide().first().show();

            //(추가) 첫 번째 이전버튼과 마지막 다음버튼을 삭제
            $(".page").find(".btn-prev").first().remove();
            $(".page").find(".btn-next").last().remove();

            //[2] 다음 버튼을 누르면 버튼이 있는 페이지는 숨기고 다음 페이지를 표시
            $(".page").find(".btn-next").click(function(){
                // $(this).parent(".page").hide().next(".page").show();//페이지 바로 밑에 버튼이 있어야 작동
                $(this).parents(".page").hide().next(".page").show();//페이지 내부에 버튼이 있으면 작동
            });

            //[3] 이전 버튼을 누르면 버튼이 있는 페이지는 숨기고 이전 페이지를 표시
            $(".page").find(".btn-prev").click(function(){
                $(this).parents(".page").hide().prev(".page").show();
            });
            
        });
    </script>
</head>
<body>


    <div class="container w-500">
        <div class="cell center">
            <h1>제목</h1>
        </div>
        <div class="cell page">
            <h1>1페이지</h1>
            <button class="btn-prev">이전</button>
            <button class="btn-next">다음</button>
        </div>
        <div class="cell page">
            <h1>2페이지</h1>
            <button class="btn-prev">이전</button>
            <button class="btn-next">다음</button>
        </div>
        <div class="cell page">
            <h1>3페이지</h1>
            <button class="btn-prev">이전</button>
            <button class="btn-next">다음</button>
        </div>
        <div class="cell page">
            <h1>4페이지</h1>
            <button class="btn-prev">이전</button>
            <button class="btn-next">다음</button>
        </div>
        <div class="cell page">
            <h1>5페이지</h1>
            <button class="btn-prev">이전</button>
            <button class="btn-next">다음</button>
        </div>

    </div>

   

</body>
</html>

개인 공부 기록용입니다:)

728x90

'· FRONT-END > └ JS' 카테고리의 다른 글

[ AJAX ] 웹의 동기/비동기 통신 (0)	2024.06.01
[ JavaScript / jQuery ] 클래스 명을 활용하여 진행 바(progressbar) 구현 (0)	2024.05.31
[ JavaScript / jQuery ] 표시 제어 (0)	2024.05.29
[ JavaScript / jQuery ] 체크박스 모듈 만들기 (1)	2024.05.28
[ JavaScript / jQuery ] 조건 검사 하는 방법 (상태변수, 상태객체 사용) (0)	2024.05.27

고구마가 되고 싶은 감자네

고구마가 되고 싶은 감자네

태그

최근글

댓글

공지사항

아카이브

'· FRONT-END > └ JS' 카테고리의 다른 글

관련글

티스토리툴바