jQuery ajax 切换回点击的 img src答案

【问题标题】：jQuery ajax switch back to clicked img srcjQuery ajax 切换回点击的 img src
【发布时间】：2013-01-03 19:17:45
【问题描述】：

我通过 ajax 使用 click 将图片从拇指放大到大。

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

src="image_thumb.jpg"

切换到

src="image_large.jpg"

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

【问题讨论】：

标签： jquery ajax thumbnails

【解决方案1】：

由于 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/

【讨论】：

这行得通，但你能解释一下 $(this) 和 var $this = $(this) 吗？
在事件回调中，this指的是DOM元素。所以，你想“jqueryfy”你的 DOM 元素来操作它，这就是$this 的原因。即使 jQuery 缓存了对同一个 DOM 元素的多次调用，如果要对其执行多个操作，最好始终将带有一组元素的 jquery 对象分配给一个变量
我总是使用例如 $('img')。感谢您的解释。

【解决方案2】：

您可以使用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 进行任何更改以适应大图像或缩略图。

【讨论】：

切换是要走的路。在第一个回调中，使用 AJAX 获取图像，在第二个中，将其替换为拇指的 src。
我刚刚查看了 .toggle()，它说在 1.8 中已弃用，将在 1.9 中删除。 .toggle() 的任何替代品？
看起来什么都没有：see this post
只需在点击事件中查看
是的，另一种选择是将add a class添加到像“thumb”这样的img标签，当您将其更改为大图像时，remove拇指类并添加另一个类，如“大”。然后你可以检查它是否has a class并相应地改变它。