Question

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

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

我希望通过用户鼠标悬停并进行一些额外动作来获取它们，这是问题，它只是返回“未识别”，我无法获得它们的宽度，

“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);

////////////////////////问题 - 第二部分

    $('.thumb').on("hover", function(){


        id  = $(this).attr('id');
        id = "#" + id;

        w = $(id).width();
        t = $('#thumb_5').width();

        var s = $(id).prevAll().width();
        $(id).css("opacity",".7");

        console.log(id +  '?' + w + '->' + s + t);

        } );    



    });





    });

Answer 1

尝试

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

或者可以直接喜欢

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

Answer 2

为图片标记赋予宽度，例如

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

替换为

img[i] = $('<img class="thumb" width="<your image width>" id="thumb_' + i + ' " >');

然后你可以从jQuery语句

获得图像的宽度

我已修复您的jsFiddle并进行更新，您可以在http://jsfiddle.net/kUBsa/6/

查看

Answer 3

我认为问题在于，在将IMG标记附加到DOM之后，当您尚未从服务器加载时，您正试图获取图像的宽度。

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

无法获得Created Element -Jquery的width（）

3 个答案: