2026, 새로운 도약을 시작합니다.
SIR
목록으로
이전글 다음글

랜덤?으로 자리 배치하는 태그?제이쿼리? 채택완료

초초록물고기
프로필 보기이 회원 글보기이 회원의 댓글보기
 1년 전 조회 2,990
답변 1
목록

안녕하세요~
평등한 방법을 찾다가.. 우연히 생각하는게 있어서 

초보 이렇게 질문 올립니다.

아래와 같이 3개의 사진과 사진설명이 들어갑니다.

접속할때 랜덤으로 자리가 바뀌게 하고 싶습니다.

사진+텍스트

티스토리 블로그와 그누보드 게시판에 작성하려고 합니다.

조언 부탁드립니다. 좋은 하루 보내세요

3672934563_1724813349.0414.jpg

#그누보드5 #랜덤태그 #자리랜덤 #제이쿼리

답변 1개

채택된 답변
+20 포인트

978180634_1724814116.3688.gif

Copy 
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        *{margin: 0; padding: 0;}

        .container {

            display: flex;

            flex-direction: column;

            align-items: center;

            justify-content: center;

        }

 

        .item {

            margin: 20px;

            text-align: center;

        }

 

        .photo {

            width: 200px;

            height: 100px;

            display: flex;

            align-items: center;

            justify-content: center;

            background-color: #ddd;

            margin-bottom: 10px;

        }

 

        .text {

            font-size: 16px;

        }

    </style>

    <script src="https://code.jquery.com/jquery-latest.min.js"></script>

    <script>

        $(document).ready(function() {

            const $container = $('.container');

            const $items = $container.children();

 

            $items.sort(function() {

                return Math.random() - 0.5;

            });

 

            $container.append($items);

        });

            </script>

</head>

<body>

    <div class="container">

        <div class="item" id="item1">

            <div class="photo">사진1</div>

            <div class="text">어쩌구 저쩌구(텍스트)</div>

        </div>

        <div class="item" id="item2">

            <div class="photo">사진2</div>

            <div class="text">아이고 아이고(텍스트)</div>

        </div>

        <div class="item" id="item3">

            <div class="photo">사진3</div>

            <div class="text">이래도 되나 싶다(텍스트)</div>

        </div>

    </div>

</body>

</html>
로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

너무 너무 감사합니다.
속이 시원해졌어요^^
건강하시고 행복하세요^^

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고