jquery - jQuery从链接更改图像onClick

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" />

脚本

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

演示

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" />