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() 事件以确保在加载时设置大小。