Reemplace dinámicamente el atributo img src con jQuery

Question

Estoy tratando de reemplazar la fuente de img de una fuente determinada utilizando jQuery. Por ejemplo, cuando la imagen src es smith.gif, reemplace a johnson.gif. Si williams.gif reemplaza a brown.gif etc.

EDITAR: Las imágenes se recuperan de un XML a un orden aleatorio, sin clase para cada una.

Esto es lo que he intentado:

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'); 
      } 

Nota que mi HTML tiene muchas imágenes. Por ejemplo

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

etc.

Entonces, ¿cómo puedo reemplazar las imágenes: SI img src = "http://example.com/smith.gif" a continuación, mostrar "http: // ejemplo .com/williams.gif ". etc ...

Muchas gracias

Answer 1

Esto es lo que quiere hacer:

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

Answer 2

Es necesario comprobar a cabo el método attr en la documentación de jQuery. Lo estás haciendo mal uso. Lo que está haciendo dentro de las sentencias if simplemente reemplaza todas las etiquetas de imagen src con la cadena especificada en el 2 ° parámetro.

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

Una mejor manera de acercarse a la sustitución de una serie de imágenes de origen sería colocar a través de cada uno y comprobar su fuente.

Ejemplo:

$('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'); 
    } 
});