jQuery - 设置div高度等于div宽度

Question

我正在尝试创建一个具有正方形网格的响应式网站。 所以我需要每个div的高度（使用'main'类）与调整大小时的div宽度相同。 我对jQuery很新，所以我希望有人能告诉我这里我做错了什么。

var divWidth = $('.main').width(); 

$(window).resize(function(){
    $('.main').height() = divWidth;
});

非常感谢！

Answer 1

您不应该在resize（）函数的范围之外声明divWidth ，因为在触发resize事件时不会更新该值。 此外，存在可能存在多个.main元素的风险。 要么使用ID，要么遍历所有类（如果有多个实例）。

试试这个：

$(window).resize(function(){
    // If there are multiple elements with the same class, "main"
    $('.main').each(function() {
        $(this).height($(this).width());
    });

    // Or you can switch to using an ID
    $('#main').height($('#main').width());
}).resize();

您再次触发resize（）事件以确保在加载时设置大小。

Answer 2

你可以做：

var divWidth = $('.main').width(); 

$(window).resize(function(){
    $('.main').height(divWidth);
});

Answer 3

尝试

var divWidth = $('.main').width(); 

$(window).resize(function(){
    $('.main').height(divWidth);
});

Answer 4

试试这个：

var divWidth = $('.main').width(); 

$(window).resize(function(){
    $('.main').height( divWidth );
});

请注意，在不使用参数调用时， height()将为您提供高度，但是使用参数，它将更改对象的高度;）