jquery - jQuery ajax 切换回点击的 img src

Question

我有一个使用点击的ajax从拇指放大到大的图像。

他们使用相同的 html 元素只是替换了 img src，例如：

src="image_thumb.jpg"

切换到

src="image_large.jpg"

我的问题是，当用户再次点击时如何切换回拇指图像。

Answer 1

您可以使用toggle-event API 来使用两个功能：一个是从 thumb 更改为 large，另一个是从 large 更改为 thumb。通过使用切换，每次用户单击时，它将在两者之间交替。

如果你想尝试类方法，你可以这样做：

$('img').on('click', function(){
   if ($(this).hasClass('thumb')){
     $(this).removeClass('thumb').addClass('large');
     //set your large image here
   } else {
     $(this).removeClass('large').addClass('thumb');
     //set your thumb image here
   }
});

这里的好处是您可以使用 CSS 进行任何更改以适应大图像或缩略图。

Answer 2

由于toggle在 1.8 中已弃用并在 1.9 中删除，因此您应该这样做

$('img').on('click', function(){
  var $this = $(this);
  if ($this.data('originalSrc')){
    $this.prop('src', $this.data('originalSrc'));
    $.removeData(this, 'originalSrc');
  } else {
    $this.data('originalSrc', $this.attr('src'));
    $this.prop('src', 'image_large.jpg');
  }
});

演示http://jsfiddle.net/PSFeJ/