0

リンクがクリックされたときにjQueryを使用して画像を回転させ、元の画像に戻そうとしています。

jQuery:

$(document).ready(function() {     
  $('#toggle').click(function() {
  $('img', this).attr('src', function(i, oldSrc) {
      return oldSrc == 'images/1.jpg' ? 'images/2.jpg' : 'images/1.jpg';
  });
  $('#link').toggle(400);
  return false;
  });
});

HTML

<a href="#" id="toggle">button</a>
<img src="images/1.jpg" height="68" width="216" alt="" id="#link" />

ここで何が問題なのかよくわかりません。助けてくれてありがとう。

4

3 に答える 3

1

このコードのビット:

$('img', this).attr('src', function(i, oldSrc) {
    return oldSrc == 'images/1.jpg' ? 'images/2.jpg' : 'images/1.jpg';
});

要素の子孫である画像を探してい<a>ますが、指定された HTML には当てはまりません (兄弟です)。代わりに次のようにする必要があります。

$(this).next('img').attr('src', function(i, oldSrc) {
    return oldSrc == 'images/1.jpg' ? 'images/2.jpg' : 'images/1.jpg';
});

そして、Anton が既に言ったように、画像の ID 属性を変更する必要があります。

于 2013-10-17T10:54:09.393 に答える
0

これを試して、

HTML

<a href="#" id="toggle">button</a>
<img src="images/1.jpg" height="68" width="216" alt="" id="link" />

脚本

$(document).ready(function () {
    $('#toggle').click(function () {
        $('#link').attr('src', function (i, oldSrc) {
            return oldSrc == 'images/1.jpg' ? 'images/2.jpg' : 'images/1.jpg';
        });
       $('#link').toggle(400);
        return false;
    });
});

デモ

于 2013-10-17T10:57:16.893 に答える
0

いくつか間違っていることがあります:

$('img', this)クリックされたリンク内の画像タグを選択します。したがって、この場合は何も選択されません。

$('#link').toggle(400);交互のクリックで画像を表示および非表示にします。

そして最後に、前述のように、イメージの ID はlinkではなくにする必要があり#linkます。

コードを機能させるには、次のように変更します。

$('#toggle').click(function(e) {
  e.preventDefault();
  $('#link').attr('src', function(i, oldSrc) {
      return oldSrc == 'images/1.jpg' ? 'images/2.jpg' : 'images/1.jpg';
  });
});

そして、これへのイメージタグ:

<img src="images/1.jpg" height="68" width="216" alt="" id="link" />
于 2013-10-17T10:57:26.867 に答える