JQuery [ val, show, hide 2 ]

양혜정·2024년 4월 21일

JQuery 실행

목록 보기

6/42

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>val(), hide(), show() 에 대해서 알아봅니다.</title>

<link rel="stylesheet" href="css/02.css">

<script type="text/javascript" src="../../js/jquery-3.7.1.min.js"></script>
<script type="text/javascript" src="js/02.js"></script> 

</head>
<body>
	문제 : 3+5*4=<input type="text" id="answer" />
	<br><br>
    <button type="button" id="btnOK">정답확인</button>	
    <button type="button" id="btnRestart">다시시작</button>

	<div class="answerCheck ok"></div>
	<div class="answerCheck no"></div>
</body>
</html>

JS

$(document).ready(function(){

    $("input#answer").focus();

    // "정답확인" 버튼을 클릭했을 경우
    $("button#btnOK").bind('click', function(){

        const user_answer = $("input#answer").val().trim();

        if(user_answer == ""){  // 문제를 풀지 않은 경우
            if(confirm("정답을 미기입 하셨는데 정말로 진행하시겠습니까?")){
                
                // 채점
                func_check(user_answer);
            }
            else{
                $("input#answer").val("").focus();
            }
        }
        else{   // 문제를 푼 경우
            // 채점
            func_check(user_answer);
        }

    })      // end of $("button#btnOK").bind('click', function(){})---------------------

    // "다시시작" 버튼을 클릭했을 경우
    $("button#btnRestart").bind('click', function(){

        // 값을 비우고 focus 주기
        $("input#answer").val("").focus();
        
        // 정답 확인 결과 감추기
        $("div.answerCheck").hide();

    })      // end of $("button#btnRestart").bind('click', function(){})------------

})      // end of $(document).ready(function(){}------------------


// === 함수 선언식 ==== //
// Function Declaration
function func_check(user_answer){
    if(user_answer == 23){      // 정답이라면
        
        $("div.ok").html(`<img src='images/ok.png'/>`);
        // 위의 것만 있을 경우 실행이 한번밖에 되지않는다.
        // 다시시작 이후에도 정답확인을 할 경우를 생각하여 show와 hide 를 설정해야 한다.
        
        $("div.ok").show();
        $("div.no").hide();
        
    }
    else{   // 오답이라면

        $("div.no").html(`<img src='images/no.png'/>`);
        // 위의 것만 있을 경우 실행이 한번밖에 되지않는다.
        // 다시시작 이후에도 정답확인을 할 경우를 생각하여 show와 hide 를 설정해야 한다.
        
        $("div.ok").hide();
        $("div.no").show();
        
    }

}   // end of function func_check(user_answer){}------------------

CSS

@charset "UTF-8";

div.answerCheck {
	margin: 10px;
}

정리

jQueryStudy -> 01_eventHandling -> chap03_show_hide_toggle_val -> 02_val_show_hide.html, 02.js, 02.css

양혜정

이전 포스트

JQuery [ val, show, hide 1 ]

다음 포스트

JQuery [ val, show, hide 2 ]

JQuery 실행

HTML

JS

CSS

정리

JQuery [ val, show, hide 1 ]

JQuery [ Toggle ]

0개의 댓글