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