두번째 단원으로 클릭이벤트를 제어하는 내용을 담고 있다.
- 결과물 ==> 클릭!
- 내용
– 버튼을 클릭해 특정 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; }