jQuery - 将 div 高度设置为与 div 宽度相等

Question

我正在尝试制作一个响应式网站，其中有一个正方形的网格。因此，当调整大小时，每个class为'main'的div的高度需要与div的宽度相同。我对jQuery还不太熟悉，所以希望有人能告诉我这里做错了什么。

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

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

许多感谢！

- user2277377

---

尝试在 divWidth 前不加 var.. 这样会将其作用域限制。 - asifrc

你可能也想在页面大小改变时重新计算宽度。$('.main').height($(this).width()); - David Houde

人们真的只是互相抄袭答案吗？ - asifrc

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

- Terry

Answer 2

您可以进行以下操作：

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

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

- Eli

---

你的代码和其他两个答案有什么区别？ - asifrc

非常感谢。我选择这个作为答案，因为它是第一个。答案都一样，因为我的问题太简单了。我真是个新手！谢谢大家！ - user2277377

Answer 3

尝试

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

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

- Tamil Selvan C

Answer 4

试试这个：

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

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

请注意，当不带参数调用height()时，它将返回对象的高度，但是当带有参数时，它将更改对象的高度;)

- 0xmtn