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 回答