イベントのソース要素を参照する簡単な方法はありますか？

Question

私は、全体のJavaScriptと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"); 
    } 
    }); 
} 

を

2つのIDを自分の関数に渡すのではなく、ソース要素を参照するためのより良い方法があるのでしょうか？

Answer 1

イベント内で「this」を使用します。通常、jQueryでは、これはハンドラを呼び出した要素を参照します。

また、インラインスクリプトイベントハンドラをタグで使用しないようにしてください。これらのイベントをドキュメントの準備が整った状態にすることをお勧めします。

NB以下のコードでは、ハンドラ（リンク）を呼び出す要素がテーブルの内部にあるため、最も近いものを使用してそれに移動できます。これは当てはまらない可能性があります。マークアップに応じて、他のトラバリングオプションのいずれかを使用する必要があります。

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

をし、これにあなたのjavascriptを変更します：

$(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