자바 스크립트 클래스 및 jQuery 이벤트 리스너

Question

해당 섹션 (이 예제에서는 #one 및 #two) 내의 객체에 이벤트 리스너를 첨부해야하는 클래스를 작성하고 있지만 클래스의 변수를 전달하는 데 문제가 있습니다. jQuery 이벤트 리스너를 설정하십시오.

<script type="text/javascript"> 

    function myClass(id) { 

     this.id = id; 

     $(document).ready(function(){ 

      $(this.id + ' .filter').click(function(){ alert("You clicked a filter"); }); 

     }); 

    } 

    one  = new myClass('#one'); 
    two  = new myClass('#two'); 

</script> 

<div id="one"> 
    <a href="javascript://" class="filter">I am link one</a> 
</div> 

<div id="two"> 
    <a href="javascript://" class="filter">I am link two</a> 
</div> 

... 불행히도 변수 범위가 나와 동의하지 않습니다; this.id은 $(document).ready()에서 액세스 할 수 없으므로 이벤트 리스너는 실행되지 않습니다. 어떻게 접근 할 수 있습니까?

Answer 1

"this"는 현재 함수가 호출 된 개체를 참조하는 키워드이기 때문입니다. jQuery를 이벤트 핸들러로,이 객체는 이벤트 투수가 등록 된 DOM 요소 인 개체 저장하기 위해 다른 변수 이름을 사용합니다 (이 경우, 즉 문서를.) : 당신은 local 복사본을 만들 필요가

<script type="text/javascript"> 
    function myClass(id) { 
      var me = this; 
      this.id = id; 

      $(document).ready(function(){ 
        $(me.id + ' .filter').click(function(){ alert("You clicked a filter"); }); 
      }); 
    } 
    one    = new myClass('#one'); 
    two    = new myClass('#two'); 
</script> 

Answer 2

을 this의 내부 함수 내부에서이 기능을 사용하려면

function myClass(id) { 
    this.id = id; 
    var that = this; 
    $(document).ready(function(){ 

     $(that.id + ' .filter').click(function(){ alert("You clicked a filter"); }); 

    }); 
} 

Answer 3

을이 경우에, 당신은 당신의 document.ready 기능에 this.id에 대한 id을 교환, 전혀 다른 변수에 선언 할 필요가 없습니다

당신이 그것에 어떤 처리를 한 경우

function myClass(id) { 
    $(document).ready(function(){ 
     $(id + ' .filter').click(function(){ alert("You clicked a filter"); }); 
    }); 
} 

그러나, 다른 변수에 별칭 this 항상 수 :

function myClass(id) { 
    var base = this; 
    base.id = id; 
    // Other items set on base.value 

    $(document).ready(function(){ 

     $(base.id + ' .filter').click(function(){ alert("You clicked a filter"); }); 

    }); 

}