Question

我正在尝试使一些盒子具有相同的大小，除了高度属性外，一切似乎都有效 - 当我尝试通过jQuery动态更改它时。

值似乎没问题，当我调整窗口大小时，它会正确打印到控制台，背景颜色道具也可以正常工作。有人可以指出我在这里错过了什么......？

编辑：如果我手动设置一些值，如300，它也可以正常工作...所以我猜它与变量imageHeight有关..

import $ from 'jquery';

class Images {
    constructor() {
        this.images = $('.box-image');
        this.imageHeight = this.images[0].height;
        this.boxes = $('.content-box');
        this.events();
    }

    events() {
        $(window).resize(this.boxAdjustment.bind(this));
    }

    boxAdjustment () {
        if(this.images.length > 0) {
            this.adjustHeight();
        }
    }

    adjustHeight() {
        console.log(this.imageHeight);

        $(this.boxes).each(function (i, element) {
            $(element).css({'height': this.imageHeight + 'px'});
            $(element).css({'background-color': '#f1f1f1'});
        });
    }
}

export default Images;

Answer 1

我过于复杂，并没有正确调用resize，而是这样做了：

import $ from 'jquery';

class Images {
    constructor() {
        this.events();
    }

    events() {
        $(window).resize(function() {
            var images = $('.box-image');
            var imageHeight = images[0].height;
            var boxes = $('.content-box');

            console.log(imageHeight);

                if(images.length > 0) {
                    $(boxes).each(function (i, element) {
                        $(element).css({'height': imageHeight + 'px'});
                        $(element).css({'background-color': '#f1f1f1'});
                    });
                }

        });
    }
}

export default Images;

jQuery不会在调整大小时更改高度属性

1 个答案: