用jquery交换图像src答案

【问题标题】：Swap image src with jquery用jquery交换图像src
【发布时间】：2013-03-19 20:37:17
【问题描述】：

我有一个大图像和一个小拇指，我正在尝试相互交换它们的 src。在这里，我在bottleWrapper img 中更改 thumb img，但我想交换他们的 src。请帮忙！

HTML

<div class="bottlesWrapper">
  <img src="bottle1.png" />
</div>

<div class="thumbs">
   <img src="bottle2.png" />
</div>

脚本

<script>
$('.thumbs a').each(function() {
    $(this).click(function() {
       var aimg = $(this).find("img")

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

    });
});
</script>

编辑

谢谢大家:)

我居然忘了给出一个我有各种拇指的信息，这个答案最适合！感谢大家的宝贵意见！

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

【问题讨论】：

拇指里面没有标签
另请参阅 Design Chemical 的“交换画廊”示例：designchemical.com/blog/index.php/jquery/…（我想添加淡入/淡出并不难）

标签： jquery image swap attr src

【解决方案1】：

SWAP 图片喜欢：

LIVE DEMO

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

如果您有多个“画廊”，请点赞：http://jsbin.com/asixuj/5/edit

【讨论】：

不，这再次将 BIG img 更改为小图像源.. 我想要那个例如。您在顶部有绿色图像，当您单击黑色 img 拇指时，我希望黑色拇指变为粉红色并在顶部显示黑色 img .. '基本上想交换两个图像' 我希望我不会混淆你
嘿..你能解释一下为什么[0]？
@itsMe 在 jQuery 中就像 $(this).attr('src') 在 JS 中是 this.src 所以，将 $(this) 返回到原生 JS 元素引用 (this) 你使用 [0] 所以你可以这样做： $(this)[0].src 而不是 $(this).attr('src') 但我保留 $(this) 而不是使用 this 所以我可以使用 jQuery 方法 .fadeIn(400)

【解决方案2】：

您的问题中没有<a> 标签..所以假设它的img.. 点击拇指img.. bottlesWrapper 将被交换..

试试这个

更新

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

});

注意：你不需要each 循环...... jquery 剂量通过使用类选择器工作..

【讨论】：

不工作 :( 它唯一改变了瓶子包装器 img 的来源，而不是拇指 img 的来源
非常感谢 :) 真的很有帮助

【解决方案3】：

试试：

$('.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 标记，然后更改图像源。

【讨论】：

不，它起作用了 :( 它唯一改变了瓶子包装器 img 的来源，而不是 thumbs img

【解决方案4】：

由于您在 .thumb 中没有 <a> 标记，因此您的代码根本不起作用，请尝试单击 .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() 方法。

【讨论】：

@itsMe 谢谢你看过这个。
非常感谢 Jai :)