无法获取已创建元素-Jquery的宽度()

无法获取已创建元素-Jquery的宽度(),jquery,width,slideshow,Jquery,Width,Slideshow,我制作了一个小幻灯片,我有一个大的宽屏幕来显示全尺寸的图像,下面有一个小条来显示拇指图像, 它将创建图像,创建容器,它将通过一个按钮来完成。。。 一切都很好,拇指将在容器中创建 现在我想知道用户悬停在哪一个图像上,并计算容器边缘和点击图像之间的空间,为此我需要每个拇指宽度(我在第二部分的代码中对问题进行了评论) 我想通过用户鼠标悬停的地方的id获取它们,并做一些额外的移动,问题是,它只返回“未识别”,我无法获取它们的宽度 控制台日志中未标识“t”、“w”和“s” 如果我不能动态地创建拇指,我可以

我制作了一个小幻灯片,我有一个大的宽屏幕来显示全尺寸的图像,下面有一个小条来显示拇指图像, 它将创建图像,创建容器,它将通过一个按钮来完成。。。 一切都很好,拇指将在容器中创建

现在我想知道用户悬停在哪一个图像上,并计算容器边缘和点击图像之间的空间,为此我需要每个拇指宽度(我在第二部分的代码中对问题进行了评论)

我想通过用户鼠标悬停的地方的id获取它们,并做一些额外的移动,问题是,它只返回“未识别”,我无法获取它们的宽度

控制台日志中未标识“t”、“w”和“s”

如果我不能动态地创建拇指,我可以得到它们

有人能帮忙吗

/////////////////第一部分

var slides=new Array('_images/0.jpg' , '_images/1.jpg' , '_images/2.jpg' ,               '_images/3.jpg',
                         '_images/4.jpg','_images/5.jpg','_images/6.jpg',
                         '_images/7.jpg','_images/8.jpg');




var img = new Array();                       

$(function () {


    $('#start').click(function(){


        var thumbContainerWidth = 0 ;

        for( i = 0 ; i < slides.length ; i++){





            img[i] = $('<img class="thumb" id="thumb_' + i + ' " >');
            img[i].css({ "margin-left": 10 + "px"       ,
                         "opacity"    : 0               ,
                         "float"      : "left"          , 
                         "padding"    : "5px 0 5px 0"   ,

            });
            img[i].attr( "src",slides[i] );
            $('#thumbContainer').append( img[i] );

            //10px Extra space for paddings 
            temp = img[i].width() + 10 ;
            thumbContainerWidth += temp;
            $('#thumbContainer').width( thumbContainerWidth);
            console.log('Preperation ' + i);
            console.log(thumbContainerWidth );

       }



    //Start !

    var j = 0;

    handle = setInterval( function() {


            img[j].fadeTo(1500,1);

            console.log('here we go ->' + j);
            j++;

            if( j >= slides.length) {

                clearInterval( handle );
                return 1;
            }

    },1000);
试着

temp = $('#thumb_'+i).width();
temp += 10;
或者可以直接喜欢

temp = $('#thumb_'+i).width() + 10 ;

为图像标记指定宽度,如

img[i] = $('<img class="thumb" id="thumb_' + i + ' " >');
img[i]=$('');
取代

img[i] = $('<img class="thumb" width="<your image width>" id="thumb_' + i + ' " >');
img[i]=$('');
然后可以从jQuery语句中获得图像的宽度


我已经修复了您的JSFIDLE和更新,您可以在

上查看它。我相信问题在于,在您将图像的IMG标记附加到DOM之后,您正在尝试获取图像的宽度,而此时图像尚未从服务器加载


您应该确保仅在图像加载完成后才开始计算

temp工作正常,最后一部分不工作…w,t和s$('.thumb')。在(“hover”,function()上){……是的,我相信是的……有趣的是,首先我在创建后立即获得图像宽度……但当我想通过其id获取图像时,它不起作用……我尝试了很多不同的东西,.load.window和……仍然是一样的……我不能用小提琴处理图像……或者有办法添加它们吗?@OmidHosseini,你不能链接你的本地图像所以首先你必须把这个图片上传到你的服务器上,或者你也可以使用免费的图片上传服务,比如说,然后使用图片链接
img[i] = $('<img class="thumb" width="<your image width>" id="thumb_' + i + ' " >');