Question

我正在javascript中构建自己的照片库，部分用于体验，部分用于项目。现在，我遇到了一些围绕物体的问题。

创建Image对象时，会将其推送到Gallery对象中的数组。在评论// constrain to width（要点中的第55行）周围，我正在尝试从对象中获取width和height属性。如果我在console.log变量img，我可以看到对象的属性和功能。但是，如果我console.log(img.height);，我会得到未定义的。我做错了什么？

整个文件如下。它也是here in a gist以便于阅读。

var Image = function(img, gallery){
    // init with an image in jquery form
    this.src = img.attr('src');

    this.setDimensions = function(){
        var temp_height, temp_width;
        $this = this;
        $this.image = $('<img />').attr('src', this.src).load(function(){
            $this.height = this.height;
            $this.width = this.width;
        });
    };

    // init functions
    this.setDimensions();
    gallery.images.push(this);


}; // Image

var Gallery = function(){
    this.width = $(window).width();
    this.height = $(window).height();
    this.images = [];

    this.createElements = function(){
        $('body').append('<div id="the_gallery"></div>');
        $('#the_gallery').css({width: this.width, height: this.height});
    };

    this.open = function(){
        this.createElements();

        var img = this.images[0];

        // see if the image is bigger than the window
        if( this.width >= img.width && this.height >= img.height) {
            console.log('image < window');
            // just show the image, centered
        }

        else {
            console.log('image > window');
            var temp_width, temp_height;
            // constrain to height
            if( img.width < img.height ) {
                console.log('image width < image height');
                temp_height = this.height;
                temp_width = (temp_height/img.height) * img.width;

                img.css({height:temp_height, width:temp_width});

            }

            // constrain to width
            else {
                console.log('image width > image height');
                temp_width = this.width;
                temp_height = (temp_width/img.width) * img.height;
                img.image.css({height:temp_height, width:temp_width});
            }

        }

        img.image.appendTo($('#the_gallery'));

    }; // open

    this.close = function(){
        $('#the_gallery').remove();
    }; // close
}; // Gallery

$(document).ready(function(){
    $('#gallery img').click(function(){
        launchGallery($(this));
    }); // click

    var gallery = new Gallery(),
        test = new Image($('#gallery img:first'), gallery);

    gallery.open();
}); // doc ready

Answer 1

我投了票，但这里有一些帮助：

当您致电new Image时，您会重新加载它，并在width事件触发时设置height和load。那是在其余代码运行之后 - 当你到达那一点55时，图像可能还没有被加载。

一个简单的解决方案是直接从img.width()获取宽度/高度，并始终在window.onload上运行插件。如果你想支持动态加载的图像，你将不得不刷新该逻辑，并在构建库之前等待所有内容都加载。

另外，避免泄露全局变量，var（第7行）中缺少$this = this。

Answer 2

我不确定这一点：但值得一试。而不是“$（'＃the_gallery'）。css（{width：this.width，height：this.height}）;”

也许试试这个：

“$（'＃the_gallery'）。css（'width'，this.width +'px'）。css（'height'，this.height +'px'）;”

为什么我不能在javascript中访问对象的属性？

2 个答案: