[jQuery] Dynamisch generierte ID ein/ausblenden

[sonicks]

Hallo

Ich gebe mir mittels PHP und einer While Schleife eine Liste von Mitgliedern aus, wo anfangs nur der Name angezeigt werden soll, und wenn man darauf klickt per jQuery darunter noch eine Tabellenzeiler eingeblendet wird, die dann die zugehörigen Details enthält. Diese werden standardmäßig per css auf display:none gesetzt und dann per jQuery geändert:

<script>
	$(document).ready(function(){
							   
		$("#list_head").toggle(
		  function () {
			$('#list_details').css('display', 'block');
		  },
		  function () {
			$('#list_details').css('display', 'none');
		  }
		);
		
	 });
</script>

echo '<table>
	      <thead>
    		   <tr>
			<th>Name</th>
			<th>Vorname</th>
		  </tr>
	    </thead>';

while($data = mysql_fetch_array($res, MYSQL_ASSOC)) {
						
	echo '<tr>
         		<td><a id="list_head">'.$data["name"].'</a></td>
			<td>'.$data["vorname"].'</td>
		 </tr>
		 <tr id="list_details">
	        	<td colspan="3">
				<div>
					Details
				</div>
			</td>
		</tr>';
}
echo '</table>';

Jetzt habe ich das Problem dass die id ja nur einmalig sein darf und das Script bei Klick nur auf den ersten Eintrag reagiert. Wie kann ich da jetzt für jede Ausgabe eine einmalige ID ausgeben und diese dann per jQuery auch korrekt ansprechen?

Grüße

 

[Sven Mintel]

Moin,

verzichte auf IDs und gebe dem #list_head stattdessen die class "list_head" ...das reicht aus.

Die Zuweisung der Funktion kannst du dann so vornehmen:

$(document).ready(function(){						   
		$(".list_head").click(
		  function () {$(this).parent().parent().next().toggle();}
		);	
});

 

[sonicks]

Hi

Danke! Funktioniert einwandfrei. In die ganze this - Geschichte muss ich mich mal noch einlesen.

Noch eine kurze Frage:

Wieso macht er das nicht, wenn ich der <tr> mit dem Namen drin die class="list_head" gebe ohne ein Link. Also quasi das wenn man auf die komplette Zeile klickt, sollen die Details ausgefahren werden.

 

[Sven Mintel]

Das hängt mit dem this zusammen.

this ist das auslösende Element, also bisher das <a>
Die Details sind von dort ansprechbar per

parent().//Eltern-TD
parent().//Eltern-TR
next()//nächster Knoten

wenn du das nun auf die <tr> anwendest, muss die Anweisung nur noch lauten:

$(this).next().toggle();