This

  1. 이벤트 핸들러에서의 this DOM 가리킴
  2.  

    $(this)

  3. 현재 이벤트가 적용된 개체(DOM) jQuery 개체로 반환
  4.  

    This.id

  5. DOM 개체 클릭된 요소를 알고자 때에는 id 속성 사용





[ThisId.htm]



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>This.id DOM 요소의 id 속성 가져오기</title>

    <style type="text/css">

        .redColor { color:Red; }

    </style>

    <script src="js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function() {

            //[1] 닷넷코리아 레이어 클릭시 CSS 클래스 해제

            $('#dnk').bind('click', function() {

                //[a] 해제

                $('#mainMenu .redColor').removeClass('redColor'); // 3개의 요소의 CSS 클래스 해제

                //[b] #dnk만 다시 적용

                $(this).addClass('redColor'); // 현재 나만 다시 적용

            });

 

            //[2] mainMenu의 모든 항목에 대해서 click 이벤트 적용

            $('#mainMenu .redColor').bind("click", function() {

                //[!] this.id로 분기

                if (this.id == "va") {

                    alert("비주얼 아카데미 클릭");

                }

                else if (this.id == "ll") {

                    alert($(this).text()); // #ll 안에 들어있는 텍스트

                }

            });

        });

    </script>

</head>

<body>

    <div id="mainMenu">

        <div id="dnk" class="redColor">닷넷코리아</div>

        <div id="va" class="redColor">비주얼아카데미</div>

        <div id="ll" class="redColor">라이선스랜드</div>

    </div>

</body>

</html>

 




-------------------------------------------------------------------------------------




[실행결과]








--> "닷넷코리아"텍스트 클릭시...




Posted by holland14
: