[웹개발]버튼클릭시 다음 페이지 이동 관련

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

[웹개발]버튼클릭시 다음 페이지 이동 관련

undefined주차

박*우

・

추천

・

조회수

답변 완료

* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.

* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.

하기에 div.card.h-100 전체 버튼에 클릭을 하면 다음 페이지로 넘어가게끔 구현하려면 어떻게 해야되나요~?

<div class="mycards">
    <div class="row row-cols-1 row-cols-md-4 g-4" id="cards-box">
        <div class="col">
            <div class="card h-100">
                <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                     class="card-img-top">
                <div class="card-body">
                    <h5 class="card-title">영화 제목이 들어갑니다</h5>
                    <p class="card-age">여기에 영화에 대한 나이가 들어갑니다</p>
                </div>
            </div>
        </div>
    </div>
</div>

해당 코드(카드박스) 부분 어딘가에 버튼을 넣으면 될것같은데 가이드 부탁드립니다

작성한 코드 및 에러 메세지

오류 발생 시, 작성한 코드 전체와 에러 메시지를 첨부해 주세요.

<script>
        $(document).ready(function(){
          listing();
        });

        function listing() {
            $('#cards-box').empty()
            $.ajax({
                type: 'GET',
                url: '/movie',
                data: {},
                success: function (response) {
                    let rows = response['movies']
                    for(let i = 0; i < rows.length; i++) {
                        let image = rows[i]['image']
                        let title = rows[i]['title']
                        let age = rows[i]['age']

                        let temp_html = `<div class="col">
                                            <div class="card h-100">
                                                <img src="${image}"
                                                     class="card-img-top">
                                                <div class="card-body">
                                                    <h5 class="card-title">${title}</h5>
                                                    <p class="card-age">${age}</p>
                                                </div>
                                            </div>
                                        </div>`

                        $('#cards-box').append(temp_html)
                    }
                }
            })
        }

        function posting() {
            $.ajax({
                type: 'POST',
                url: '/movie',
                data: {url_give:'https://www.dtryx.com/movie/list.do?cgid=FE8EF4D2-F22D-4802-A39A-D58F23A29C1E&Tab=indieart' },
                success: function (response) {
                    alert(response['msg'])
                    window.location.reload()
                }
            });
        }
        function detail(){
            print('해당 카드박스를 클릭해서 들어갑니다')
        }
        function open_box(){
            $('#post-box').show()
        }
        function close_box(){
            $('#post-box').hide()
        }
    </script>
</head>

<body>
<div class="mytitle">
    <h1>독립영화맛집</h1>
    <button onclick="posting()">Top10 호출</button>
</div>
<div class="mycards">
    <div class="row row-cols-1 row-cols-md-4 g-4" id="cards-box">
        <div class="col">
            <div class="card h-100">
                <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                     class="card-img-top">
                <div class="card-body">
                    <h5 class="card-title">영화 제목이 들어갑니다</h5>
                    <p class="card-age">여기에 영화에 대한 나이가 들어갑니다</p>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

</html> 아이콘을 눌러 코드박스를 만들어 보세요.

Tip 2) Ctrl+A(맥의 경우 Command+A) 단축키로 코드를 한 번에 선택할 수 있어요!

댓글 알림