Gibt es eine einfachere Möglichkeit, das Quellelement für ein Ereignis zu referenzieren?

Question

Ich bin neu in der ganzen JavaScript und jQuery-Codierung, aber ich bin zur Zeit dies zu tun ist mein HTML:

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

Und dann habe ich einige etwas schwerfälliger Code, um das Element zu zwicken:

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"); 
    } 
    }); 
} 

Ich frage mich hauptsächlich, ob es eine bessere Möglichkeit gibt, das Quellenelement zu referenzieren, als zwei IDs an meine Funktion zu übergeben.

Answer 1

Verwenden Sie 'dies' innerhalb des Ereignisses. In jQuery bezieht sich dies normalerweise auf das Element, das den Handler aufgerufen hat.

Versuchen Sie auch, Inline-Skript-Ereignishandler in Tags zu vermeiden. Es ist besser, diese Ereignisse im Dokument bereit zu halten.

Hinweis: Der folgende Code geht davon aus, dass das Element, das den Handler (den Link) aufruft, innerhalb der Tabelle liegt, so dass er ihn mit dem nächstgelegenen Befehl durchlaufen kann. Dies ist möglicherweise nicht der Fall und Sie müssen möglicherweise eine der anderen Verfahroptionen abhängig von Ihrem Markup verwenden.

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

Sie können dies tun:

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

und Ihr Javascript, um diese Änderung:

$('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; 
}); 

edit: geändert Skript den Namen Attribut zu verwenden und hat eine return false auf den Klick Handler.

Answer 3

Ich bin sicher, dass dies Ihre Frage nicht beantworten, aber es ist eine nette Plugin für Tabellenzeilen erweitert, könnte nützlich sein, check it out:

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