jQuery Image Replacement

Question

Je souhaite remplacer une image par une autre image lorsqu'un clic est effectué sur un lien. J'ai trois images qui vont chacune à un lien spécifique. Ainsi, par exemple, le lien un a besoin de l'image 1, l'image du lien 2 deux. etc ... Je ai compris comment faire le remplacement:

$(function() { 
    $("a#t2").click(function() { 
     $("#floatleft img").replaceWith('<img src="images/image1.jpg" />'); 
     }); 
    }); 

<div id="floatleft"> 
    <img src="images/about.jpg" /> 
</div> 
<div id="content"> 
    <ul id="abouttabs"> 
    <li><a id="t1" href="#tab1"><img src="images/menu1.png" alt"menu1" /></a></li> 
    <li><a id="t2" href="#tab2"><img src="images/menu2.png" alt"menu2" /></a></li> 
    <li><a id="t3" href="#tab3"><img src="images/menu3.png" alt"menu3" /></a></li> 
</ul> 

Comme vous pouvez le voir j'ai trois onglets avec ids de t1, t2 et t3. Je voudrais remplacer t1 avec image1, t2 avec image2, et t3 avec image3 lorsque les liens respectifs sont cliqués. Je peux évidemment faire ceci en faisant trois fonctions du code ci-dessus, mais je me demandais s'il y a une manière plus facile de faire ceci avec une fonction each ou quelque chose. De toute évidence, le meilleur moyen serait d'avoir l'image à l'intérieur de l'onglet div, mais je ne peux pas le faire parce qu'il défile et que l'image dans l'onglet le fait défiler aussi bien. Je suppose que je pourrais le faire défiler avec la page, mais je n'aime pas à quoi cela ressemble. Alors je me suis dit que je vais essayer une solution simple jQuery ...

Answer 1

Essayez ceci:

<script type="text/javascript"> 
$(function() { 
    $("#abouttabs li a").click(function() { 
    var newImgSrc = "images/image_" + this.id + ".jpg"; 
    $("#floatleft img").attr("src", newImgSrc); 
    }); 
}); 
</script> 

l'intérieur d'un gestionnaire jQuery, this est une référence à l'élément DOM (non l'objet jQuery) que ' déclenché l'événement - cela vous permettra de déterminer quel onglet a été cliqué, et vous pourrez ensuite extraire l'ID de l'élément de cet onglet et remplacer la source d'image en conséquence. Si vous en avez besoin, vous pouvez isoler la partie numérique de l'ID d'élément en effectuant un remplacement de chaîne/regex dans la première ligne du gestionnaire (où nous affectons newImgSrc) - mais il est beaucoup plus simple de renommer vos images en tant que image_t1.jpg, image_t2.jpg, image_t3.jpg.

Answer 2

Essayez cette photo.

$('#abouttabs').find('a').click(function() 
{ 
    var item = this.parentNode; 
    var index = 0; 

    do 
    { 
     item = item.previousSibling; 
     index++; 
    } 
    while (item != null); 

    $("#floatleft img").replaceWith('<img src="images/image' + index + '.jpg" />'); 
});