Javascript jQuery在调整大小时不更改height属性

Javascript jQuery在调整大小时不更改height属性,javascript,jquery,css,Javascript,Jquery,Css,我试图使一些框的大小相同,但除了height属性之外,其他所有东西似乎都正常工作——当我试图通过jQuery动态更改它时 值似乎是正常的,当我调整窗口大小时,它会正确地打印到控制台,并且背景色道具也会按预期工作。有人能指出我遗漏了什么吗 编辑:如果我手动输入一些值,比如300,它也能正常工作……所以我猜它和变量imageHeight有关 import $ from 'jquery'; class Images { constructor() { this.images

我试图使一些框的大小相同,但除了height属性之外,其他所有东西似乎都正常工作——当我试图通过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;

我过于复杂,没有正确调用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;

当你在console.log
this.box
this.images=$('.box image')
后得到什么?结果是:(3)[div.content-box,div.content-box,div.content-box,div.content-box,prevObject:jQuery.fn.init(1)]0:div.content-box 1:div.content-box 2:div.content-box长度:3 prevObject:jQuery.fn.init(1)proto:Object(0)我认为问题在于,您试图像在数组中一样访问特定图像,但jQuery返回HTML元素,因此
this.images[0]
未定义。改为试试。实际上,是console.log(this.images[0]);按设想打印图像。我有三个高度相同的图像,所以我只想使用该值设置它们旁边的div值。现在,当我更加注意时,似乎resize()只打印一个值,因此只打印一个图像高度(取决于窗口大小)。也许这不是调用窗口的正确方法。调整大小。。?