web-dev-qa-db-ja.com

img src属性をjQueryに動的に置き換えます

JQueryを使用して、特定のソースのimgソースを置き換えようとしています。たとえば、画像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」を表示します。など...

どうもありがとう

javascriptjqueryimage
31
jQuerybeast

これはあなたがやりたいことです：

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

JQueryドキュメントのattrメソッドをチェックアウトする必要があります。あなたはそれを誤用しています。 ifステートメント内で実行していることは、すべての画像タグsrcを2番目のパラメーターで指定された文字列に置き換えるだけです。

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