5

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

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

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

非常感谢！

4

4 回答 4

8

您不应该divWidth在 resize() 函数的范围之外声明，因为触发 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() 事件以确保在加载时设置大小。

于 2013-04-13T12:18:54.873 回答
6

你可以做：

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

$(window).resize(function(){
    $('.main').height(divWidth);
});
于 2013-04-13T12:12:48.670 回答
2

尝试

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

$(window).resize(function(){
    $('.main').height(divWidth);
});
于 2013-04-13T12:14:50.607 回答
2

尝试这个：

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

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

请注意，在height()不带参数的情况下调用时会给你高度，但是带参数时，它会改变对象的高度；）

于 2013-04-13T12:14:55.123 回答