Question

我正试图通过点击另一个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();

});

感谢您提供的任何帮助。

Answer 1

语法错误：

$('.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');
});

demo

Answer 2

有些事情错了：

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/

jquery onClick动态加载图像并将其淡入

2 个答案: