jquery

Question

के साथ स्वैप छवि स्रोत मेरे पास एक बड़ी छवि और छोटे अंगूठे हैं, मैं एक दूसरे के साथ अपने स्रोत को स्वैप करने की कोशिश कर रहा हूं। यहां मैं बोतल के आईएमजी में अंगूठे img बदल रहा हूँ, लेकिन मैं उनके स्रोत स्वैप करना चाहता हूँ। कृपया मदद करें!

एचटीएमएल

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

Answer 1

करने के लिए स्वैप छवियों पसंद है:

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

Answer 2

प्रयास करें:

$('.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 टैग की घटनाओं क्लिक देते हैं और फिर छवि स्रोत बदल जाते हैं।

Answer 3

वहाँ में कोई <a> टैग है आपके प्रश्न .. तो अपने img .. सीएल पर मानते हैं img .. bottlesWrapper swaped हो जाएगी अंगूठे की ick ..

कोशिश इस

अद्यतन

$('.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 खुराक की जरूरत नहीं है कि एक वर्ग चयनकर्ता का उपयोग करके ..

Answer 4

जैसा कि आपके पास टैगमें नहीं है 10 अपने कोड बिल्कुल काम नहीं करेगा, बजाय कोशिश .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() विधि के माध्यम से पुनरावृति की जरूरत नहीं है अपने आप में एक संग्रह है।