Thay thế hình ảnh sử dụng jQuery

Question

Đây là tôi 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> 

My CSS:

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

Vì vậy, tôi chỉ muốn thay đổi div #show với bất kỳ hình thu nhỏ dưới nó khi nhấp vào. Tôi đã thử nó bằng cách sử dụng jQuery .attr('src', 'url'); nhưng nó không hoạt động tốt.

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

Cảm ơn bạn

Answer 1

tài .on() gán sự kiện click vào DOM và .attr() để có được giá trị của DOM thuộc tính.

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

Giải thích

trong mã trên i giao click sự kiện để những hình ảnh bên trong div với id của thumbnails bây giờ đầu tiên có được src attribute của clicked image và đặt nó vào src biến.

sau đó ở dòng tiếp theo, thay thế src attribute hình ảnh bên trong 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 (bạn nên sử dụng các lớp học):

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