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的{{1}}内的图片，现在首先获取thumbnails的{{1}}并设置它进入src attribute变量。

然后在下一行中替换clicked image内的src图片。

Answer 2

演示：http://jsfiddle.net/PemHv/3/

jQuery的：

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

HTML（你应该使用类）：

<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

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

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

Answer 4

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

使用jQuery替换图像

4 个答案: