Ersetzen Bild mit jQuery

Question

Hier ist mein HTML:

<div id="show"> 
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR51FTd5w9iwfz_PLnUTUIbYBB0bCX6d3ue1ZSx3SJObNLGECEm" 
> 
</div> 
<div id="thumbnails"> 
    <div id="thumbnail1"> 
     <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTPIzMxDNjQ_x4iUZ6WLo9R32QKCreu8PQGxcRHWmUw4hNcYmiR" 
     width="100" height="100"> 
    </div> 
    <div id="thumbnail2"> 
     <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR51FTd5w9iwfz_PLnUTUIbYBB0bCX6d3ue1ZSx3SJObNLGECEm" 
     width="100" height="100"> 
    </div> 
    <div id="thumbnail3"> 
     <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTsplNlIS3zRyy89UxlT5Nwu_Bn7m6w7iqMYXPF9q9MpLOG17XR" 
     width="100" height="100"> 
</div> 

Mein CSS:

#thumbnails div { 
    float:left; 
    border:1px solid; 
} 
#thumbnails div:hover { 
    color:yellow; 
} 

Also, ich möchte nur die div #show mit irgendwelchen Thumbnails unten, es zu ändern, wenn darauf geklickt. Ich habe es mit jQuery .attr('src', 'url'); versucht, aber es funktioniert nicht gut.

Fiddle: http://jsfiddle.net/PemHv/

Danke

Answer 1

Benutzer .on() Click-Ereignis zuzuordnen dom und .attr() zu bekommen Wert von DOM zuzuschreiben.

$('#thumbnails img').on('click',function(){ 
    var src = $(this).attr('src'); 
    $('#show img').attr('src',src); 
}); 

Erklärung

in obigem Code zugewiesen i click Ereignis auf die Bilder innerhalb div mit der ID von thumbnails jetzt zuerst die src attribute der clicked image bekommen und es in src Variable gesetzt.

Dann in der nächsten Zeile ersetzen Sie die src attribute des Bildes innerhalb show div.

Answer 2

Demo: http://jsfiddle.net/PemHv/3/

jQuery:

$('img',".thumbnail").click(function(){ 
    var src = $(this).attr('src'); 
    $('img',$('#show')).attr('src',src); 
}); 

HTML (Sie sollten Klassen verwenden):

<div id ="show"> 
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR51FTd5w9iwfz_PLnUTUIbYBB0bCX6d3ue1ZSx3SJObNLGECEm" width="200" height="200"> 
    </div> 

<div id="thumbnails"> 
<div class="thumbnail"> 
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTPIzMxDNjQ_x4iUZ6WLo9R32QKCreu8PQGxcRHWmUw4hNcYmiR" width="100" height="100"> 
    </div> 

<div class="thumbnail"> 
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR51FTd5w9iwfz_PLnUTUIbYBB0bCX6d3ue1ZSx3SJObNLGECEm" width="100" height="100"> 
    </div> 
    </div> 

Answer 3

$('#show') 
    .children() 
    .on('click', function(event) { 
     $(event.target).attr('src', 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTPIzMxDNjQ_x4iUZ6WLo9R32QKCreu8PQGxcRHWmUw4hNcYmiR'); 
    }); 

Answer 4

http://jsfiddle.net/PemHv/9/

$('#thumbnails div').click(function(){ 
    var path = $(this).find('img').attr("src"); 
    //console.log(path) 
    $('#show img').attr("src", path); 
});