使用jQuery替换图像

Question

这是我的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>

我的CSS:

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

因此,我只想div #show在点击时更改其下面的任何缩略图.我尝试过使用jQuery .attr('src', 'url');但效果不佳.

小提琴:http://jsfiddle.net/PemHv/

谢谢

Answer 1

用户.on()将点击事件分配给dom并.attr()获取属性值DOM.

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

说明

在上面的代码我分配click事件到内部的图像div,thumbnails现在首先得到src attribute的clicked image并将其设置为src变量.

然后在下一行它取代src attribute里面的图像show div.