Chargement des images dans une balise DIV

Question

J'ai une liste d'images dans une balise div avec l'id sIMG.

Exemple:

<div id="sIMG"> 
<img src="1.jpg" title=""/> 
<img src="2.jpg" title=""/> 
<img src="3.jpg" title=""/> 
<img src="4.jpg" title=""/> 
<img src="5.jpg" title=""/> 
<img src="6.jpg" title=""/> 
</div> 

maintenant Si je clique sur une image que je besoin de charger dans la balise div sIMG.

Mon code se présente comme suit, mais il semble que pour charger la première image:

jQuery(document).ready(function(){ 
    jQuery('#sIMG img').click(function(){ 

     /* Get the sources */ 
     var currentSRC = jQuery('#sIMG img').attr('src'); 
     var altSRC = jQuery('#sIMG img').attr('title'); 
     alert(currentSRC) 
     /*Fade, Callback, swap the alt and src, fade in */ 
     jQuery('#IMGHolder').fadeOut('fast',function(){ 
      jQuery('#IMGHolder').html('<img src='+currentSRC+' title='+altSRC+' />'); 
      jQuery('#IMGHolder').fadeIn('fast'); 
     }); 
    }); 
}); 

que je fais quelque chose de mal ici?

Answer 1

utilisation

$(this) pour accéder à l'élément en cours à l'intérieur du gestionnaire d'événements.

jQuery(document).ready(function(){ 
     jQuery('#sIMG img').click(function(){ 
      /* Get the sources */ 
      var currentSRC = jQuery(this).attr('src'); 

      var altSRC = jQuery(this).attr('title'); 

      alert(currentSRC); 

      /*Fade, Callback, swap the alt and src, fade in */ 

      jQuery('#IMGHolder').fadeOut('fast',function(){ 
       jQuery(this).html('<img src='+currentSRC+' title='+altSRC+' />').fadeIn("fast");      
      }); 
     }); 

    }); 

Answer 2

que je fais quelque chose qui cloche?

Probablement. À l'intérieur d'un gestionnaire $(this) vous donnera un handle jQuery sur l'objet qui a été cliqué. Vous voudrez probablement jQuery(this).

Qu'est-ce que votre code actuel fait il sort et cherche img éléments, quel que soit l'événement de clic.

Votre code HTML est également malformé:

<div id="sIMG"> 
<img src="1.jpg" title=""/> 
<img src="2.jpg" title="""/> 
<img src="3.jpg" title="""/> 
<img src="4.jpg" title="""/> 
<img src="5.jpg" title="""/> 
<img src="6.jpg" title=""/> 
</div> 

devrait être

<div id="sIMG"> 
    <img src="1.jpg" title=""/> 
    <img src="2.jpg" title=""/> 
    <img src="3.jpg" title=""/> 
    <img src="4.jpg" title=""/> 
    <img src="5.jpg" title=""/> 
    <img src="6.jpg" title=""/> 
</div> 

Ignore l'indentation, c'est le """ je contestait.