Changement de l'image src de l'ancre onclick en utilisant jquery?

Question

J'utilise jquery pour faire apparaître une boîte de partage AddThis lorsque je clique sur un lien qui entoure une image. Cela fonctionne très bien. Le code jquery J'utilise est ici:

 //added to show/hide add-this 
    $('a#slick-toggle').click(function() { 
     $('#atBox').toggle(100); 
     return false; 
    }); 

Et ceci est mon html pertinente:

<a id="slick-toggle" href="#" title="Share"> 
<img src="images/navicon/navicon4_off.gif" alt="share" id="share" class="img-swap"> 
</a> 

Cela fait une petite boîte div apparaît qui a des icônes de partage. Cela fonctionne comme prévu. Ce que je voulais faire était aussi de rendre l'image qui est à l'intérieur des balises d'ancrage "switch" lorsque l'on a cliqué sur l'étiquette d'ancrage. Malheureusement, les scripts "onclick" de l'image jquery que j'ai trouvé pour faire cela ne semblent pas fonctionner, probablement parce que le "lien" est cliqué, pas l'image? Quoi qu'il en soit, j'ai essayé « fusionner » le script initial avec un script échange d'image en procédant comme suit, mais pas de chance:

 $('a#slick-toggle').click(function() { 

     if ($('#share').attr("class") == "img-swap") { 
      this.src = this.src.replace("_off","_on"); 
     } else { 
      this.src = this.src.replace("_on","_off"); 
     } 
     $('.img-swap').toggleClass("on"); 


     $('#atBox').toggle(100); 
     return false; 
    }); 

Il ne semble pas question de ce que je mets dans cette troisième ligne, je ne peux pas jamais obtenir le jquery pour reconnaître que je fais référence à l'image. Je reçois toujours un message "Impossible d'appeler la méthode 'remplacer' du message indéfini". J'ai essayé ceci, $ ('# share') et ('#share'), et ils me donnent tous le même message. Je ne suis pas trop familier avec jquery, mais est-ce que je fais quelque chose qui ne va pas dans mon script pour faire référence à la balise image lorsque la fonction est appelée sur l'événement anchor onclick?

Merci!

Answer 1

Vous devez trouver l'image à l'intérieur depuis votre gestionnaire click est sur le <a> qui l'enveloppe, comme ceci:

$('a#slick-toggle').click(function() { 
    var img = $(this).find("img")[0]; 
    if ($('#share').attr("class") == "img-swap") { 
     img.src = img.src.replace("_off","_on"); 
    } else { 
     img.src = img.src.replace("_on","_off"); 
    } 
    $('.img-swap').toggleClass("on"); 
    $('#atBox').toggle(100); 
    return false; 
}); 

Ou, changer les choses un peu comme ceci:

$('a#slick-toggle').click(function() { 
    var img = $('#share')[0], isSwap = img.className == "img-swap"; 
    img.src = isSwap ? img.src.replace("_off","_on") : img.src.replace("_on","_off"); 
    $('.img-swap').toggleClass("on"); 
    $('#atBox').toggle(100); 
    return false; 
}); 

Answer 2

Une autre alternative: essayez d'utiliser .children() pour sélectionner un élément enfant de celui que vous avez cliqué

$(this).children('> img') 

Dans ce cas, l'image qui est un descendant direct de l'endroit où la fonction de clic est appelée.

http://api.jquery.com/children/