2016-11-07 6 views
-3

wir sagen, dass wir diesen HTML-Code haben:jquery - wie ein Wert nehmen

<tr> 
 
\t <td><a href="#depend"><i id="damage-file" class="fa fa-group">test1</i></a></td> 
 
\t <td><a href="#depend"><i id="damage-file" class="fa fa-group">test2</i></a></td> 
 

 
</tr> 
 
<tr> 
 
\t <td><a href="#depend"><i id="damage-file" class="fa fa-group">test3</i></a></td> 
 
\t <td><a href="#depend"><i id="damage-file" class="fa fa-group">test4</i></a></td> 
 

 
</tr>

jedes Mal, wenn ich auf einer von denen Sie auf ein jQuery-Code verknüpfen bekommen, hier zu laufen ist die jquery:

$(document).ready(function(){ 
 
\t //References 
 
\t var sections = $("i"); 
 
\t var loading = $("#loading"); 
 
\t var content = $("#ajax-box"); 
 
\t var id = 2 // <= this should be the value of tr 
 
\t 
 
\t sections.click(function(){ 
 
\t \t 
 
\t \t showLoading(); 
 
\t \t 
 
\t \t switch(this.id){ 
 
\t \t \t case "damage-file": 
 
\t \t \t \t content.slideToggle(); 
 
\t \t \t \t content.load("./sections.php #section_home",{'userdata':id}, hideLoading); 
 

 
\t \t \t \t break; 
 
\t \t \t case "depend-people": 
 
\t \t \t \t content.slideToggle(); 
 
\t \t \t \t content.load("./sections.php #section_people", hideLoading); 
 
\t \t \t \t break; \t 
 
\t \t \t default: 
 
\t \t \t \t //hide loading bar if there is no selected section 
 
\t \t \t \t hideLoading(); 
 
\t \t \t \t break; 
 
\t \t } 
 
\t }); 
 

 
\t //show loading bar 
 
\t function showLoading(){ 
 
\t \t loading 
 
\t \t \t .css({visibility:"visible"}) 
 
\t \t \t .css({opacity:"1"}) 
 
\t \t \t .css({display:"block"}) 
 
\t \t ; 
 
\t } 
 

 
\t function hideLoading(){ 
 
\t \t loading.fadeTo(1000, 0); 
 
\t }; 
 
});

(Wie Sie sehen können, benutze ich jquery, um eine andere Seite zu laden)

Jedes "tr" -Tag hat eine Nummer und ich möchte, wenn ich auf irgendeinen Link klicke (in ein "tr"), geht diese Nummer zum jquery >> "var id" .for diese exmaple ist ein Code:

<tr id="123"> 
 
    <td><a href="#depend"><i id="damage-file" class="fa fa-group">test1</i></a></td> 
 
    </tr> 
 
<tr id="456"> 
 
    <td><a href="#depend"><i id="damage-file" class="fa fa-group">test2</i></a></td> 
 
</tr>

wenn ich auf "test1" klicken dann id = 123 sollte der jquery als Wert geht an und wenn ich auf "test2" dann id = 456 geht an die jquery als Wert..kann mir jemand für dieses Problem helfen?

+0

aussehen würde ich glaube, Sie könnten hier zunächst in einige Probleme laufen, weil Ihre HTML einige Probleme hat. Sie können nur eine bestimmte ID verwenden, so dass mehrere 'id =" damage-file "' nicht funktionieren - Sie sollten dies in ein Datenattribut oder eine Klasse ändern. Als Nächstes verwenden Sie numerische IDs für die TRs. In HTML können IDs nicht mit einer Zahl beginnen. Sie können also wiederum ein Datenattribut verwenden, um diese Daten zu speichern, oder die IDs so ändern, dass ihnen eine Zeichenfolge vorangestellt wird . – Dymos

+1

@Dymos, mit [HTML5 spec erlaubt es einer ID, alles zu sein, solange sie keine Leerzeichen enthält] (https://www.w3.org/TR/html5/dom.html#the-id-attribute) . Wenn das OP jedoch einfach das Attribut 'id' verwendet, um diese Daten zu speichern, sind Sie mit dem Vorschlag für Datenattribute korrekt. –

+0

@PatrickEvans Oh, danke, dass du darauf hingewiesen hast, ich habe nicht bemerkt, dass sie das geändert haben! – Dymos

Antwort

2

Sie müssen den DOM-Baum vom angeklickten Element <i> durchlaufen, bis Sie zu Ihrem <tr> gelangen. Zum Glück jQuery hat eine Methode dafür .closest() genannt. Übergeben Sie einfach den Selektor, den Sie zuordnen möchten, und es wird das nächste übergeordnete Element erhalten.

In Ihrem Fall, da wollen Sie das übergeordnete <tr>, um es wie

sections.click(function(){ 
    var id = jQuery(this).closest("tr").attr("id"); 
Verwandte Themen