-
211006_on,button(영화관,영화)JQuery 2021. 10. 6. 17:27
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap" rel="stylesheet">
<style type="text/css">
button {
width: 120px;
height: 40px;
border-radius: 20px;
font-size: 1.3em;
font-family: 'Do Hyeon';
cursor: pointer;
}
button.a{
background-color: #fafad2;
}
button.b{
background-color: #87ceeb;
}
div {
position: absolute;
width: 300px;
height: 150px;
font-size: 20px;
font-family: 'Do Hyeon';
}
#one{
left: 50px;
top: 100px;
}
#two{
left: 300px;
top: 100px;
}
#three{
left: 700px;
font-size: 2em;
}
#result{
left: 100px;
font-size: 2em;
text-align: center;
width: 1000px;
top: 400px;
border: 3px solid gold;
border-radius: 30px;
padding-top: 20px;
}
#three h3:hover {
cursor: pointer;
background-color: orange;
}
</style>
<script type="text/javascript">
$(function () {
var theater="",movie="";
//#one에 버튼 추가
var b="<button type='button' id='btn1' class='a'>영화예매</button>";
$("#one").append(b);
//버튼1 이벤트
$("#btn1").click(function() {
var b2="<button type='button' id='btn2' class='b'>극장선택</button>";
b2+=" <button type='button' id='btn3' class='b'>영화선택</button>";
$("#two").html(b2);
});
//버튼2는 나중에 동적생성이므로 on이벤트
$(document).on("click", "#btn2", function() {
var s="<h3 class='theater'>CGV 강남점</h3>";
s+="<h3 class='theater'>MEGABOX 코엑스점</h3>";
s+="<h3 class='theater'>LOTTE 건대점</h3>";
$("#three").html(s);
});
//버튼3도 나중에 동적생성이므로 on이벤트..three에 나타나게
$(document).on("click", "#btn3", function() {
var s="<h3 class='movie'>007</h3>";
s+="<h3 class='movie'>모가디슈</h3>";
s+="<h3 class='movie'>샹치</h3>";
$("#three").html(s);
});
//영화관이나 제목을 클릭시 이벤트
$(document).on("click", "#three h3", function() {
//클랙한 h3태그에서 class를 얻는다
var select=$(this).attr("class");
//if문으로 극장선택시 극장명 얻기text..result에 html로 출력
if(select=='theater')
theater+="극장명: "+$(this).text();
else
movie="영화제목: "+$(this).text();
$("#result").html(theater+"<br>"+movie);
});
});
</script>
</head>
<body>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="result"></div>
</body>
</html>
기본화면 
'JQuery' 카테고리의 다른 글
211007_trigger (0) 2021.10.07 211006_이미지의 배경사진 변경 (0) 2021.10.07 211006_ (0) 2021.10.06 211006_on(동적/정적) (0) 2021.10.06 21006_animate,button,each (0) 2021.10.06