Динамически заменить атрибут img src на jQuery

Я пытаюсь заменить источник img данного источника, используя jQuery. Например, когда изображение src является smith.gif, замените на johnson.gif. Если williams.gif замените на brown.gif и т.д.

EDIT: изображения извлекаются из XML в случайный порядок, без каждого класса.

Это то, что я пробовал:

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

Обратите внимание, что мой HTML имеет много изображений. Например

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

и т.д..

Итак, как я могу заменить изображения: IF img src= "http://example.com/smith.gif", а затем показать "http://example.com/williams.gif". и т.д.

Спасибо большое

Ответы

Ответ 1

Это то, что вы хотите:

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

Ответ 2

Вам нужно проверить метод attr в документах jQuery. Вы злоупотребляете им. То, что вы делаете в операторах if, просто заменяет все теги изображений src строкой, указанной во втором параметре.

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

Лучший способ приблизиться к замене серии источников изображений - это перебрать каждый из них и проверить его источник.

Пример:

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