web-dev-qa-db-fra.com

Remplacer dynamiquement l'attribut img src par jQuery

J'essaie de remplacer la source img d'une source donnée à l'aide de jQuery. Par exemple, lorsque l'image src est smith.gif, remplacez-la par johnson.gif. Si williams.gif remplace à brown.gif etc.

EDIT: Les images sont extraites d'un fichier XML dans un ordre aléatoire, sans classe pour chacun.

C'est ce que j'ai essayé:

if ( $("img").attr('src', 'http://example.com/smith.gif') ) {
              $(this).attr('src', 'http://example.com/johnson.gif');
            }
if ( $("img").attr('src', 'http://example.com/williams.gif') ) {
              $(this).attr('src', 'http://example.com/brown.gif');
            }

Notez que mon code HTML contient de nombreuses images. Par exemple

<img src="http://example.com/smith.gif">
<img src="http://example.com/williams.gif">
<img src="http://example.com/chris.gif">

etc.

Alors, comment puis-je remplacer les images: SI img src = "http://example.com/smith.gif" puis affichez "http://example.com/williams.gif". etc. ...

Merci beaucoup

javascriptjqueryimage
31
jQuerybeast

Voici ce que tu veux faire:

var oldSrc = 'http://example.com/smith.gif';
var newSrc = 'http://example.com/johnson.gif';
$('img[src="' + oldSrc + '"]').attr('src', newSrc);
70
Niko

Vous devez vérifier la méthode attr dans les documents jQuery. Vous en abusez. Ce que vous faites dans les instructions if remplace simplement toutes les balises d'image src par la chaîne spécifiée dans le deuxième paramètre.

http://api.jquery.com/attr/

Une meilleure façon de remplacer une série d'images source serait de les parcourir en boucle et de vérifier leur source.

Exemple: 

$('img').each(function () {
  var curSrc = $(this).attr('src');
  if ( curSrc === 'http://example.com/smith.gif' ) {
      $(this).attr('src', 'http://example.com/johnson.gif');
  }
  if ( curSrc === 'http://example.com/williams.gif' ) {
      $(this).attr('src', 'http://example.com/brown.gif');
  }
});
20
Trevor