web-dev-qa-db-ja.com

画像srcをjqueryと交換します

私は1つの大きな画像と小さな親指を持っています、私はそれらのsrcを互いに交換しようとしています。ここでは、bottleWrapperimgのthumbimgを変更していますが、srcを交換したいと思います。 plsは助けます！

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>

[〜＃〜]編集[〜＃〜]

皆さんありがとう ：）

私は実際に私がさまざまな親指を持っているという1つの情報を与えるのを忘れました、この答えは最も適しています！貴重なご意見ありがとうございました！

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

To[〜＃〜] 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

6
Roko C. Buljan

ありません<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');
  });

});

[〜＃〜] note [〜＃〜]：そしてeachループは必要ありません... jqueryは、クラスセレクターを使用することで機能します。

3
bipen

試してみてください：

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

クリックイベントをimgクラス内のthumbsタグに添付してから、画像ソースを変更する必要があります。

1
Anujith

_<a>_に_.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()メソッドを反復処理する必要はありません。

1
Jai