Question

我编写了下一个函数，并希望将它们组合起来以使代码更好。基本上，它的作用是从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);
});

有人可以告诉我我做错了什么或者给我一个解决方案吗？

我在这里使用原始代码创建了一个演示：https://jsfiddle.net/tj8Lu30e/3

Answer 1

如果只有一个.responsive-col元素，这是重用square函数的一种方法。它首先缓存元素，因此jQuery只需查询DOM一次即可找到元素。

https://jsfiddle.net/hu0t1gLL/1/

$(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});
        });

});

准备好运行jQuery函数并调整

1 个答案: