Question

我通过点击使用ajax从拇指到大的放大图像。

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

src="image_thumb.jpg"

切换到

src="image_large.jpg"

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

Answer 1

您可以使用toggle-event API使用两个功能：一个用于从拇指变为大，另一个用于从大变为拇指。通过使用切换，每次用户点击时，它将在两者之间交替。

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

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

DEMO http://jsfiddle.net/PSFeJ/

jQuery ajax切换回点击img src

2 个答案: