이벤트의 소스 요소를 쉽게 참조 할 수 있습니까?

Question

나는 모든 자바 스크립트와 jQuery를 코딩에 새로운 해요하지만 난 현재이 일을하고있어 내 HTML입니다 :

<a id="tog_table0" 
    href="javascript:toggle_table('#tog_table0', '#hideable_table0');">show</a> 

그리고 나는 요소 조정할 일부 약간 육중 한 코드가 있습니다

function toggle_table(button_id, table_id) { 
     // Find the elements we need 
     var table = $(table_id); 
     var button = $(button_id); 
     // Toggle the table 
     table.slideToggle("slow", function() { 
     if ($(this).is(":hidden")) 
    { 
    button.text("show"); 
    } else { 
     button.text("hide"); 
    } 
    }); 
} 

을

두 개의 ID를 내 함수로 전달하지 않고 소스 요소를 참조하는 더 좋은 방법이 있는지 궁금합니다.

Answer 1

이벤트 내에서 'this'를 사용하십시오. 일반적으로 jQuery에서 이것은 핸들러를 호출 한 요소를 나타냅니다.

또한 태그의 인라인 스크립트 이벤트 처리기를 사용하지 마십시오. 문서에서 준비된 이벤트를 준비하는 것이 좋습니다.

NB 아래 코드는 핸들러 (링크)를 호출하는 요소가 테이블 내부에 있다고 가정하므로 가장 가까운 것을 사용하여이 요소로 이동할 수 있습니다. 이것은 그렇지 않을 수도 있으며 마크 업에 따라 다른 트래버스 옵션 중 하나를 사용해야 할 수도 있습니다.

<a href="" name="#hideable_table0" class="tableHider">show</a> 

을이에 자바 스크립트를 변경 :

$(function(){ 
    $('#tog_table0').click(toggle_table) 
}); 

function toggle_table() { 
    //this refers to the element clicked 
    var $el = $(this); 
    // get the table - assuming the element is inside the table 
    var $table = $el.closest('table'); 
    // Toggle the table 
    $table.slideToggle("slow", function() { 
     $el.is(":hidden") ? $el.text("show") : $el.text("hide"); 
    } 
} 

Answer 2

이 작업을 수행 할 수

$('a.tableHider').click(function() { 
    var table = $(this.name); // this refers to the link which was clicked 
    var button = $(this); 

    table.slideToggle("slow", function() { 
     if ($(this).is(':hidden')) { // this refers to the element being animated 
      button.html('show'); 
     } 
     else { 
      button.html('hide'); 
     } 
    }); 

    return false; 
}); 

편집 : 클릭 거짓 수익을 name 속성을 사용하고 추가로 변경 스크립트 매니저.

Answer 3

나는이 답변으로 문제가 해결되지 않습니다 확신하지만, 테이블 행 확장을위한 멋진 플러그인이있다, 그것을 확인하는 것이 유용 할 수 있습니다 내 경우

http://www.jankoatwarpspeed.com/post/2009/07/20/Expand-table-rows-with-jQuery-jExpand-plugin.aspx