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

Question

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

РЕДАКТИРОВАТЬ: изображения извлекаются из 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". и т. Д.

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

Answer 1

Вот что ты хочешь сделать:

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

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