Sostituisci immagine utilizzando jQuery

Question

Ecco il mio 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> 

mio CSS:

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

Quindi, voglio solo cambiare il div #show con qualsiasi miniature qui sotto che quando si fa clic. L'ho provato usando jQuery .attr('src', 'url'); ma non funziona bene.

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

Grazie

Answer 1

utente .on() di assegnare evento click per Dom e .attr() per ottenere il valore di attributo DOM.

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

Spiegazione

nel codice sopra ho assegnato click evento alle immagini all'interno div con id di thumbnails ora prima ottenere il src attribute del clicked image e impostare in src variabile.

quindi nella riga successiva sostituisce l'immagine src attribute all'interno di 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 (si dovrebbe utilizzare le classi):

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