HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>toggle()에 대해서 알아봅니다.</title>
<link rel="stylesheet" href="css/03.css">
<script type="text/javascript" src="../../js/jquery-3.7.1.min.js"></script>
<script type="text/javascript" src="js/03.js"></script>
</head>
<body>
<div>
<div>
<button id="btn"></button>
</div>
</div>
<div>
<div id="photo">
<img src="images/iyou.jpg" />
</div>
</div>
</body>
</html>JS
$(document).ready(function(){
$("div#photo").hide();
$("button#btn").text("보이기클릭");
$("button#btn").bind('click',function(){
if($(this).text() == "보이기클릭"){
// $(this) 는 이벤트가 발생되어진 자기자신 엘리먼트를 말한다.
$(this).text("감추기클릭");
$(this).css({"background-color":"gray", "color":"black"});
// jQuery 에서는 카멜기법이 아니라 스네이크기법 그대로 사용한다.
}
else if($(this).text() == "감추기클릭"){
// $(this) 는 이벤트가 발생되어진 자기자신 엘리먼트를 말한다.
$(this).text("보이기클릭");
$(this).css({"background-color":"", "color":""});
// jQuery 에서는 카멜기법이 아니라 스네이크기법 그대로 사용한다.
}
$("div#photo").toggle();
// 선택자요소.toggle(); 은 선택자 요소가 현재 사라진 상태라면 .show() 메소드의 동작을 수행하고,
// 나타나 있는 상태라면 .hide() 메소드의 동작을 수행한다.
})
}) // end of $(document).ready(function(){})---------------------------CSS
@charset "UTF-8";
body > div:first-child {
border: solid 0px gray;
margin: 50px 0 20px 0;
height: 100px;
display: flex;
}
body > div:first-child > div,
body > div:nth-child(2) > div {
margin: auto;
}
body > div:first-child > div > button#btn {
width: 100px;
height: 40px;
border-radius: 50%;
border: none;
background-color: navy;
color: white;
}
body > div:nth-child(2) {
border: solid 0px gray;
height: 200px;
display: flex;
}정리
- jQueryStudy -> 01_eventHandling -> chap03_show_hide_toggle_val -> 03_toggle.html, 03.js, 03.css
