Trao đổi hình ảnh src với jquery

Question

Tôi có một hình ảnh lớn và ngón tay cái nhỏ, tôi đang cố gắng trao đổi src của họ với nhau. Ở đây tôi đang thay đổi ngón tay cái img trong bottleWrapper img, nhưng tôi muốn trao đổi src của họ. Xin giúp đỡ!

HTML

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

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

SCRIPT

<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> 

EDIT

Cảm ơn tất cả :)

tôi thực sự quên đưa ra một thông tin mà tôi có ngón tay khác nhau, điều này trả lời phù hợp nhất! Cảm ơn tất cả vì những đầu vào quý giá của bạn!

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

Answer 1

Để SWAP hình ảnh làm thích:

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; 
    }); 
}); 

Nếu bạn có nhiều 'trưng bày' làm như: http://jsbin.com/asixuj/5/edit

Answer 2

Hãy thử:

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

Bạn nên đính kèm vào các sự kiện để img thẻ bên thumbs lớp và sau đó thay đổi nguồn hình ảnh.

Answer 3

ther không <a> thẻ trong của bạn câu hỏi .. cũng giả định img .. của nó trên cl ick của thumbs img .. các bottlesWrapper sẽ được swaped ..

thử này

cập nhật

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

}); 

LƯU Ý: và bạn không cần phải each loop ... jquery liều bằng cách sử dụng công cụ chọn lớp hoạt động ..

Answer 4

Vì bạn không có thẻ <a> trong .thumb mã của bạn sẽ không hoạt động ở tất cả, thay vì cố gắng nhấn vào .thumb bản thân:

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

Và .thumb là chính nó là một bộ sưu tập, do đó bạn không cần phải lặp qua .each() phương pháp.