jQuery ajax切换回到点击img src

我有一个放大的图像从拇指到大由ajax使用点击。jQuery ajax切换回到点击img src

他们是否使用相同的HTML元素只需更换IMG SRC 例如：

src="image_thumb.jpg"

开关

src="image_large.jpg"

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

来源

2013-01-20 vzhen

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

来源

2013-01-20 17:11:38 pocesar

谢谢，现在就试试吧 – vzhen

这个可以，但是你能解释$（this）和var $ this = $（this）吗？ – vzhen

在事件回调中，'this'引用了DOM元素。所以，你想“jqueryfy”你的DOM元素来操纵它，这就是'$ this'的原因。即使jQuery将多个调用缓存到同一个DOM元素，如果您要对其执行多个操作，始终将您的jquery对象与一组元素分配给一个变量是一种很好的做法 – pocesar

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

来源

2013-01-20 16:47:20 mgoffin

切换是要走的路。在第一个回调中，使用AJAX获取图像，然后在第二个回调中将其替换为拇指的src。 –

我只是检查了.toggle（），它在1.8中表示弃用，并且将在1.9中删除。任何替换.toggle（）？ – vzhen

看起来没有什么：[看到这篇文章]（http://stackoverflow.com/questions/14338078/equivalent-of-deprecated-jquery-toggle-event） – mgoffin

jQuery ajax切换回到点击img src

回答

相关问题