5

これが私の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/

ありがとうございました

4

4 に答える 4

8

.on()クリックイベントをdomに割り当て、.attr()属性値を取得するユーザーDOM。

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

説明

上記のコードでは、IDがのclick内部の画像にイベントを割り当てました。最初にのを取得して変数に設定します。divthumbnailssrc attributeclicked imagesrc

次に、次の行で、src attribute内部の画像を置き換えshow divます。

于 2013-03-01T05:25:47.683 に答える
1

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

$('#thumbnails div').click(function(){
    var path = $(this).find('img').attr("src");
    //console.log(path)
    $('#show img').attr("src", path );
});
于 2013-03-01T10:28:10.110 に答える
1

デモ： 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>
于 2013-03-01T05:26:56.523 に答える
0 
$('#show')
    .children()
    .on('click', function(event) {
        $(event.target).attr('src', 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTPIzMxDNjQ_x4iUZ6WLo9R32QKCreu8PQGxcRHWmUw4hNcYmiR');
    });
于 2013-03-01T05:30:32.343 に答える