javascript - 使用 jQuery 更改图像 src onClick

Question

我在我的网站上使用这个 HTML： <a href="#1" id="slick-toggle"><img src="img1.jpg"/></a>

当我单击此链接时，我想将图像 src 更改为img2.jpg. 并恢复到img1.jpg再次单击时等等。有人可以解释我是如何使用 jQuery 做到这一点的吗？

如果这有帮助，这是我现有的jQuery ：

$(document).ready(function() {     
  $('#slick-toggle').click(function() {
    $('#slickbox').toggle(400);
    return false;
  });
});

非常感谢您对此的任何指示:-)

Answer 1

$(document).ready(function() {     
  $('#slick-toggle').click(function() {
    $('img', this).attr('src', function(i, oldSrc) {
        return oldSrc == 'img1.jpg' ? 'img2.jpg' : 'img1.jpg';
    });
    $('#slickbox').toggle(400);
    return false;
  });
});

Answer 2

您需要在里面找到图像，因为您的点击处理程序位于包装它的位置，如下所示：

$('a#slick-toggle').click(function() {
  var img = $('#share')[0], isSwap = "True";
  img.src = isSwap ? img.src.replace("_img1","_img2") : img.src.replace("_img2","_img1");
  $('.img-swap').toggleClass("on");
  $('#atBox').toggle(100);
  return false;
});

Answer 3

为此使用此功能：

$('#mylink').toggle(
     function(){
          $(this).attr('src','img2.jpg');
     },
     function(){
          $(this).attr('src','img3.jpg');
     }
// and so on..
);

您可以在其中添加更多功能...