jQuery Ch.02 클릭 이벤트 제어

두번째 단원으로 클릭이벤트를 제어하는 내용을 담고 있다.

  • 결과물 ==> 클릭!
  • 내용
    – 버튼을 클릭해 특정 id 개체의 css 속성을 변경
    – 그림을 클릭한 후 이벤트 리스너를 해제 (한번만 작동하도록)
    – 함수를 분리하여 호출

jQuery-ch02

<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>-->&nbsp;&nbsp;<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;
}


 

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중

%d 블로거가 이것을 좋아합니다: