Question

这就是我想要实现的目标：在页面加载时从数据库获取一堆图像并将它们附加到图库div，当点击图库图像时：淡出当前的大图像 - ＆gt;将褪色图像的来源替换为点击的小图像的来源 - ＆gt;将主图像的div容器设置为新图像高度 - ＆gt;将主图像淡入淡出。

我有这段代码：

$.getJSON('inc/API.php',
{
    command: "get_ads_to_display"
},
function(result){
    $("#img_main").attr('src', 'images/'+result[0].ad_image_filename);
    for(var i = 0; i<result.length; i++)
    {
        $("<div class='div_item_container'>"+
            "<div class='div_ad_name'>"+result[i].ad_publisher+"</div>"+
            "<div class='div_ad_image'><img src='images/"+result[i].ad_image_filename+"' /></div>"+
        "</div>").appendTo("#gallery");
    }

    // Channge main image src to src of a clicked image
    //animate the main image div's height
    $('.div_item_container').on('click', '.div_ad_image img', function() {
        var src = $(this).attr('src');
        $("#img_main").fadeTo(200,0,function(){
            $("#img_main").attr('src', src);
            var img = document.getElementById('img_main'); 
            var img_height = img.clientHeight;
            //alert(img_height);
            $("#div_main_image_container").animate({height:img_height+10+'px'},250,function(){
                $("#img_main").fadeTo(200,1);
            });

        });
    });
});

它有效，除了第一次点击 - 在我没有div动画的任何图库图像上的第一次点击时，它只是改变了div的大小，替换了图像src并重新淡入。我有一个很好的div高度动画。它为什么会发生并有办法解决它？

Answer 1

您需要将事件委托给一些非动态创建的元素 -

$('#gallery').on('click', '.div_ad_image img', function() {

#gallery而不是.div_item_container（你是在一个循环中追加这个吗？）

Answer 2

解决了问题：gallery div没有定义任何初始高度属性。一旦我在CSS中定义它（甚至height:0;工作） - 一切都很好。

在动态图像上单击动画div

2 个答案: