Question

我正在尝试使用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" />

不太确定这里有什么问题，感谢您的帮助。

Answer 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属性需要改变。

Answer 2

试试这个，

<强> HTML

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

<强> SCRIPT

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

Demo

Answer 3

有一些问题：

$('img', this)将在点击的链接中选择图片代码。所以，在这种情况下，它不会选择任何东西。

$('#link').toggle(400);会在点击后显示和隐藏img。

最后如前所述，图片的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" />

jQuery从链接更改图像onClick

3 个答案: