使用jquery交换图像src

我有一个大的形象和小拇指，我试图交换他们的src与对方。在这里，我在瓶装包装器img中更改thumb img，但我想交换它们的src。请帮忙

HTML

尝试：

---

您应该将单击事件附加到

img

类中的

thumbs

标记，然后更改图像源。

到交换图像

如果你有多个“图库”，你可以这样做：

你的问题中没有

标记。所以假设它是

img

。。单击拇指img。。

瓶子振打器将被抽签

试试这个

已更新

 $('.thumbs img').click(function() {
   var img=$(this).attr('src');

  $('.bottlesWrapper img').fadeOut('fast',function(){
     $(this).attr('src', img).fadeIn('fast');
  });

  $(this).fadeOut('fast',function(){
     var bottlersImg=$('.bottlesWrapper img').attr('src');
     $(this).attr('src', bottlersImg).fadeIn('fast');
  });

});

注意：您不需要
每个
循环。。。jquery使用类选择器是否有效..
因为
中没有
标记。thumb
您的代码根本不起作用，请尝试单击
.thumb
本身：

$('.thumbs').click(function() {
    var thumbsimgSrc = $(this).find("img").attr('src');
    var bottleImgSrc = $('.bottlesWrapper img').attr('src');

    $(this).find("img").attr('src', bottleImgSrc);

    $('.bottlesWrapper img').fadeOut('fast').promise().done(function(){
       $(this).attr('src', thumbsimgSrc).fadeIn('fast');
    });
  });
});

而
.thumb
本身就是一个集合，所以你不需要迭代
.each（）
方法。
拇指内部没有标签也请参阅Design Chemical的这个“交换库”示例：（我想添加fadein/fadeout并不困难）不，它不起作用：（其唯一更换的瓶子振打器img来源，而非拇指imgNot工作：（其唯一更换的瓶子振打器img来源，而非拇指imgThanks很多：）真的很有帮助吗，这又一次将大的img变成了小的图像源..我想这样做，例如，你的顶部有绿色图像，当你点击黑色img拇指时，我想黑色拇指变成粉红色，并在顶部显示黑色img..“基本上想交换两个图像”，我希望我不会混淆uHey..你能解释为什么[0]？@itsMe在jQuery中就像
$（this）.attr（'src'）
在JS中它是
this.src
所以，要将
$（this）
返回到本机JS元素引用（
this
），您可以使用
[0]
这样做：
$（this）[0]。src
而不是
$（this）.attr（'src'）
），但我保留
$（this）
而不是使用
这个
，这样我就可以使用jQuery方法
。fadeIn（400）
@谢谢你看了这个。非常感谢你Jai:）
$('.thumbs img').click(function() {
    var thmb = this;
    var src = this.src;
    $('.bottlesWrapper img').fadeOut(400,function(){
        thmb.src = this.src;
        $(this).fadeIn(400)[0].src = src;
    });
});

$('.thumbs img').click(function() {
    var img_src = img.attr('src');

    $(this).fadeOut('fast',function(){
      $(this).attr('src', $('.bottlesWrapper img').attr('src')).fadeIn('fast');
    });

    $('.bottlesWrapper img').fadeOut('fast',function(){
       $(this).attr('src', img_src ).fadeIn('fast');
    });
});

$('.thumbs img').click(function() {
    var thmb = this;
    var src = this.src;
    $('.bottlesWrapper img').fadeOut(400,function(){
        thmb.src = this.src;
        $(this).fadeIn(400)[0].src = src;
    });
});

 $('.thumbs img').click(function() {
   var img=$(this).attr('src');

  $('.bottlesWrapper img').fadeOut('fast',function(){
     $(this).attr('src', img).fadeIn('fast');
  });

  $(this).fadeOut('fast',function(){
     var bottlersImg=$('.bottlesWrapper img').attr('src');
     $(this).attr('src', bottlersImg).fadeIn('fast');
  });

});

$('.thumbs').click(function() {
    var thumbsimgSrc = $(this).find("img").attr('src');
    var bottleImgSrc = $('.bottlesWrapper img').attr('src');

    $(this).find("img").attr('src', bottleImgSrc);

    $('.bottlesWrapper img').fadeOut('fast').promise().done(function(){
       $(this).attr('src', thumbsimgSrc).fadeIn('fast');
    });
  });
});