Hi

Ich lasse mir per PHP 7 Bilder nebeneinander ausgeben, die zu 7 Usern gehören. Jetzt möchte ich bei Klick auf das Bild per jQuery AJAX unterhalb der Bilder die Userdetails anzeigen lassen. Funktioniert auch alles, nur leider übergibt er mir immer nur die letzte ID des zuletzt angezeigten Users:

Ausgabe der Bilder:

PHP-Code:

$sql_img = "SELECT * FROM user";
$result = mysql_query($sql_img);
                
while($data = mysql_fetch_array($result, MYSQL_ASSOC)){
                
         echo '<a class="profil_img"><img src="'.$data["img"].'" width="220" height="145" alt="Test" class="profil_img"/><input type="hidden" value="'.$data["id"].'" name="user_id" class="user_id" /></a>';
                
 } 


Code :

1 2 3 4 5 6 7 8 9 10 11 12

$('.profil_img').click(function() {                 // Loading GIF im Div Containter "Kommentar" anzeigen $('#about_wrapper').append('<img src="images/icons/ajax-loader.gif" alt="Lädt gerade..." id="loading" />');                     var user_id = $('.user_id').val();                                      $.ajax({                               type: 'GET',   url: 'includes/about.inc.php',   data: 'user_id=' + user_id,

Wie kann ich jetzt die richtige ID bei einem Klick auf das jeweilige Bild übergeben?

MfG
Stefan

Naja ganz einfach
1) du spezifizierst nicht mit "this" dass auch das geklickte element genommen wird. Statt dessen selektierst du alle und .val() liefert dir aus diesem set immer nur das erste.
2) die klasse .profil_img liegt auch auf dem bild selbst, sobald das klick-ereignis dort auftritt kann natürlich eh kein vernünftiger value ausgelesen werden.

Code :

1 2 3

$('a.profil_img').click(function(){   var user_id = $(this).find('input').val(); });

ich würd's warscheinlich aber über den url-hash oder zumindest die id lösen statt ein input zu nehmen

PHP-Code:

echo '<a href="#'.$data["id"].'" class="profil_img">'
     .'<img src="'.$data["img"].'" width="220" height="145" alt="" />'
    .'</a>'; 


Code :

1 2 3

$('a.profil_img').click(function(){   var user_id = $(this).attr('href').replace(/^#/,''); });

Super, es funktioniert!

Vielen Dank.


Eine kurze Frage hätte ich noch: Wenn ich jetzt auf das erste Bild klicke, wird es unten angezeigt. Wenn ich danach auf das zweite Bild klicke, wird das erste immer noch angezeigt und das zweite darunter.

Eigentlich müsste ich doch am Anfang vom ajax.success einfach ein

HTML-Code:

$('#about_wrapper').remove();

einfügen, damit das nicht mehr passiert oder? Funktioniert leider nicht.

HTML-Code:

$('a.profil_img').click(function(){
				
					// Loading GIF im Div Containter "Kommentar" anzeigen
					$('#about_wrapper').append('<img src="images/icons/ajax-loader.gif" alt="Lädt gerade..." id="loading" />');

  					var user_id = $(this).attr('href').replace(/^#/,'');
				
					$.ajax({
						   
						type: 'GET',
						url: 'includes/about.inc.php',
						data: 'user_id=' + user_id,
						
						success: function(response){
							$('#about_wrapper').append(response);
							$('#loading').fadeOut(500, function() {
								$(this).remove();								 
							});
						}
					
					});

pffja ... eigentlich schon irgendwie so:

Code :

1 2	$('#about_wrapper').find('.details').remove() .end().append('<div class="details">'+response+'</div>');

oder so

Code :

1	$('#about_wrapper').replaceWith('<div id="about_wrapper">'+response+'</div>');

oder vergleichbares.

Kommt halt drauf an was du als response erhälst, schnapp die halt die doku und spiel ein bisschen rum ;o)

Habs mit replaceWith() gelöst!

Vielen Dank für die Antworten.

MfG

Immer doch. Nächstes mal poste ich auch vernünftigen source *G*