JQuery [ val, show, hide 1 ]

양혜정·2024년 4월 21일

JQuery 실행

목록 보기

5/42

HTML

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

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

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

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

	<div class="answerCheck ok"><img src="images/ok.png" /></div>
	<div class="answerCheck no"><img src="images/no.png" /></div>
</body>
</html>

JS

$(document).ready(function(){

    $("div.answerCheck").hide();

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

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

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

        if(user_answer == ""){  // 문제를 풀지 않은 경우
            if(confirm("정답을 미기입 하셨는데 정말로 진행하시겠습니까?")){
                $("div.ok").hide();
                $("div.no").show();
            }
            else{
                $("input#answer").focus();
            }
        }
        else{   // 문제를 푼 경우
            if(user_answer == 17){      // 정답이라면
            // if(user_answer === "17"){    
            // 타입과 값이 모두 같은경우를 찾는 , string 타입이므로 ' " ' 을 사용해주어야 한다.
                $("div.ok").show();
                $("div.no").hide();
            }
            else{       // 오답이라면
                $("div.ok").hide();
                $("div.no").show();
            }

        }

    })      // 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(){}------------------

CSS

@charset "UTF-8";

div.answerCheck {
	margin: 10px;
}

정리

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

양혜정

이전 포스트

JQuery [ Bind - ForEach ]

다음 포스트

JQuery [ val, show, hide 1 ]

JQuery 실행

HTML

JS

CSS

정리

JQuery [ Bind - ForEach ]

JQuery [ val, show, hide 2 ]

0개의 댓글