JQuery 기초정리. 2

제이쿼리 적용

 

PostBox 열고 닫기

 

결과물

 

• head 태그 안에 scipt 태그 만들기
• script 태그 안에 function 함수 작성
• 추억 저장하기 버튼에 onclick 작성
• div안에 id 선택자 가져오기
• .toggle() 메서드 작성

    </style>
    <script>
        function openclose() // 추억 저장하기 버튼을 클릭했을 때 포스팅 박스를 토글하도록 설정합니다.

{
            $('#postingbox').toggle(); // id가 postingbox인 요소를 선택합니다.
        }
    </script>
</head>

 

데이터 넣고 카드 생성하기

결과물

• script 태그안에 새로운 function 함수 작성
• 기록하기 전에 버튼에 onclick 작성
• div안에 id 선택자 가져오기
• 메서드 val을 통해 postbox에 값들 변수에 담기
• 카드 html코드 변수에 담기
• div안에 class 선택자 선택 후  append 메서드

    </style>
    <script>

             // 포스팅 박스를 토글하는 함수
        function openclose() {
            $('#postingbox').toggle();
        }

             // 카드를 생성하는 함수
        function makeCard() {

// 입력된 이미지 URL, 제목, 내용, 날짜를 사용하여 카드를 동적으로 생성하고, #card 요소에 추가합니다. 각 값은 사용자가 입력한 값($('#image').val(), $('#title').val() 등)으로 설정됩니다.

            let image = $('#image').val();
            let title = $('#title').val();
            let content = $('#content').val();
            let date = $('#date').val();
           

          // 생성할 카드의 HTML 코드
            let temp_html = `
            <div class="col">
                <div class="card h-100">
                    <img src="${image}"
                        class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">${title}</h5>
                        <p class="card-text">${content}</p>
                    </div>
                    <div class="card-footer">
                        <small class="text-muted">${date}</small>
                    </div>
                </div>
            </div>`;

 

         // 생성된 카드를 #card 요소에 추가
            $('#card').append(temp_html);
        } // temp_html 변수에는 카드를 생성하는 HTML 코드가 포함되어 있습니다. 이 코드는 템플릿 리터럴을 사용하여 동적으로 값을 삽입합니다.
    </script>