두번째 단원으로 클릭이벤트를 제어하는 내용을 담고 있다.
- 결과물 ==> 클릭!
- 내용
– 버튼을 클릭해 특정 id 개체의 css 속성을 변경
– 그림을 클릭한 후 이벤트 리스너를 해제 (한번만 작동하도록)
– 함수를 분리하여 호출
<HTML> jquery_ch02.html
<!DOCTYPE html>
<html>
<head>
<title>Jump for Joy</title>
<link href="styles/my_style.css" rel="stylesheet">
</head>
<body>
<p>jQuery는 기존 내용을 다시 로드하지 않고도 웹페이지에 새로운 내용을 삽입할 수 있습니다.</p>
<button type="button" id="btn1">Click to Add</button>
<button type="button" id="btn2">Click to Remove</button>
<br>
<div id="header" class="no_hover">
<h2>Jump for Joy Sale</h2>
</div>
<div id="main">
<div class="guess_box"><img src="images/jump1.jpg"/></div>
<div class="guess_box"><img src="images/jump2.jpg"/></div>
<div class="guess_box"><img src="images/jump3.jpg"/></div>
<div class="guess_box"><img src="images/jump4.jpg"/></div>
<p id="hint" style="position: fixed; left: 10px; bottom: 20px;"></p>
</div>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
$(document).ready(function() {
$("#btn1").click(function() {
$("#header").addClass("hover");
$("#header").removeClass("no_hover");
});
$("#btn2").click(function() {
$("#header").addClass("no_hover");
$("#header").removeClass("hover");
});
$(".guess_box").click(checkForCode);
function getRandom(num) {
var numRand = Math.floor((Math.random()*num));
return numRand;
}
var hideCode = function(){
var numRand = getRandom(4);
$(".guess_box").each(function(index, value) {
if(numRand == index){
$(this).append("<span id='has_discount'></span>");
//alert(".guess_box["+index+"] has discount.");
$("#hint").append(".guess_box["+index+"] has discount.");
return false;
}
});
};
hideCode();
function checkForCode() {
var discount_msg;
if( $.contains(this, document.getElementById("has_discount")) ){
var numDiscount = getRandom(5);
discount_msg = "Your discount is "+numDiscount+"%.";
} else {
discount_msg = "Sorry, no discount!";
}
$(this).append("<p>"+discount_msg+"</p>" );
$(".guess_box").each(function() {
$(this).unbind("click");
});
}
});
/*
$(document).ready(function() {
$(".guess_box").click(function() {
//alert("당신 나를 눌렀군.");
$(".guess_box p").remove();
// 함수로 분리
//var discount = Math.floor((Math.random()*5) + 5);
//var discount_msg = "<p>Your discount is "+discount+"%.</p>";
// for debug
//alert( discount_msg);
// 모든 사진 박스에 메시지를 출력하게 된다
//$(".guess_box").append( discount_msg);
// 하나의 사진 박스에만 메시지를 출력한다.
//$(this).append( discount_msg);
$(this).append( "<p>"+getRandom(10)+"</p>" );
// 사진 한개씩만 클릭 이벤트를 해제한다.
//$(this).unbind("click");
// 클래스 그룹 선택자로 선택된 모든 개체에 대한 클릭 이벤트를 해체한다.
// 즉, 모든 클릭 리스너가 해제되어 딱 한번만 실행된다.
$(".guess_box").each(function() {
$(this).unbind("click");
});
});
$("p").append("<br>--> <strong>예를 들면 나처럼요.</strong>");
});
*/
</script>
</body>
</html>
<CSS> my_style.css
div{
float:left;
height:245px;
text-align:left;
border: solid #000 3px;
}
#header{
width: 500px;
/* border 속성들이 충돌해서 .hover와 .no_hover 클래스 스타일이 먹지 않음
==> 삭제해 줘야 작동
border: 0px; */
height: 50px;
margin-top: 10px;
margin-bottom: 10px;
padding-left: 20px;
padding-bottom: 5px;
}
#main{
background-color: grey;
height: 500px;
}
.guess_box {
height: 245px;
}
.hover {
border: solid #f00 3px;
}
.no_hover {
border: solid #000 3px;
}
