在就绪状态下运行jQuery函数并调整大小

我编写了下面的函数，并希望将它们结合起来，使代码更好。基本上，它所做的是从div中获取宽度，并将其应用于高度，以使div方形且响应：

$(document).ready(function() {
    var square = $(".responsive-col").width();
    $(".responsive-col").height(square)
});

$(window).resize(function() {
    var square = $(".responsive-col").width();
    $(".responsive-col").height(square)
});

我尝试了一种我在这里找到的方法，但没有成功。这是我尝试过的，但没有成功：

function square() {
    var imageWidth = $(".responsive-col").width();
    $(".responsive-col").height(imageWidth);
});

$(document).ready(square);
$(window).on('resize', square);

我也尝试过这个，但也没有成功：

$(document).ready(function(){
    square();
    $(window).on('resize', square);
});

function square() {
    var imageWidth = $(".responsive-col").width();
    $(".responsive-col").height(imageWidth);
});

有人能告诉我我做错了什么或给我一个解决办法吗

---

我在这里用原始代码创建了一个演示：

如果只有一个

.responsive col

元素，这是重用

square

函数的一种方法。它首先缓存元素，因此jQuery只需查询DOM一次即可找到元素

---

“它不起作用”可以形容为“它不起作用”，可以在问题中包含

html

，创建stacksnippets，jsfiddle来演示？不同的事件不能同时触发。@RomanC这不是真的在window.load（）上尝试一下有什么不同吗？@Rudi什么不是真的？你在开玩笑吗？这绝对不是一个解决办法。是的。为什么你认为不是呢？这里有一把小提琴-代码被更正为假装只有一个

.responsive col

，因为ID为

#overlay

的相关元素必须是唯一的

$(document).ready(function() {

    var $responsiveCol = $('.responsive-col');
    var $overlay = $('#overlay');

    function square() {
        var width = $responsiveCol.width();
        $responsiveCol.height(width);
        $overlay.css({ width: width, height: width });
    }    

    square();

    $(window).resize(square);

    $overlay
        .mouseenter(function() {
            $overlay.stop(true, false).animate({opacity: "0"}, {duration: 300});
        })
        .mouseleave(function() {
            $overlay.stop(true, false).animate({opacity: "0.8"}, {duration: 300});
        });

});