0

別のdivをクリックして、画像をdivに動的にロードしようとしています。divのIDを使用して一致する写真を呼び出し、フェードインさせようとしています。

私はそれを完全に機能させることができません、ここにフィドルがありますhttp://jsfiddle.net/X82zY/36/

ここにもコードを入れます

HTML：

<div id="container">
    <img id="preload" onload="fadeIn(this)" src="#" style="display:none;" />
</div>

<div id="TDodd" class="iso"></div>

JS

function fadeIn() {
    $(this).fadeIn(1000);
}

$(".iso").click(function() {

  var id = $(this).attr('id');

    $('#container 
img').attr('src','http://www.klossal.com/klossviolins/instruments/violins/full/' + id + '.jpg');

    fadeIn();

});

私がここで得ることができるどんな助けにも感謝します。

4

2 に答える 2

2

構文エラー：

$('.iso').click(function() {
       ^

idによってではなく、によって要素を取得することもできますclass。
その他の問題は、コンテンツが動的に作成されているため、on代わりにを使用して、イベントをドキュメントにバインドする必要があることです。

したがって、コードは次のようになります。

$(document).on('click', '#TDodd', function() {
  var id = this.id;
  $('#preload').prop('src', 'http://www.klossal.com/klossviolins/instruments/violins/full/' + id + '.jpg');

  fadeIn('#TDodd');
});

デモ

于 2013-01-16T04:40:50.667 に答える
0

いくつか間違っている：

1.）フィドルがロード関数にバインドされていませんでした。

2.）.isoセレクターですでに指摘されている引用符の不一致

3.）クリックイベント内のfadeInメソッド呼び出し。

最終的なjsは次のようになります。

function fadeIn(obj) {
    $(obj).fadeIn(1000);
}

$('.iso').click(function()
{
  var id = $(this).attr('id');

    $('#container img').attr('src','http://www.klossal.com/klossviolins/instruments/violins/full/' + id + '.jpg');

    fadeIn($('#container img'));
});

http://jsfiddle.net/X82zY/40/

于 2013-01-16T04:51:40.517 に答える