Question

我正在使用下面的代码来定位一些投资组合框并使它们达到相同的高度。通常我对此代码没有任何问题，但由于某种原因，它将高度设置为好像其中没有内容。几乎不喜欢它忽略了里面的任何内容。

我看过CSS并且看不到影响高度的任何东西，除了JS指示列高度。

以下是代码（live site）：

<script type="text/javascript">
    (function() {
        function equalHeights(selector) {
            var maxHeight = 0;
            function calcEqualHeight() {
                var el = $(this);
                maxHeight = el.height() > maxHeight ? el.height() : maxHeight;
            }
            selector.each(calcEqualHeight).height(maxHeight);
        }

        equalHeights($('.ffb-portfolio-content-2'));
    })();
</script>

Answer 1

在页面完全呈现之前，您的脚本似乎正在运行。通过运行$('.ffb-portfolio-content-2').attr("style", null)来撤消不正确的行为，然后从控制台再次运行脚本，我能够强制执行正确的行为。

对此的解决方案只是延迟脚本直到页面完全加载：

$(document).ready(function() {
    function equalHeights(selector) {
        var maxHeight = 0;
        function calcEqualHeight() {
            var el = $(this);
            maxHeight = el.height() > maxHeight ? el.height() : maxHeight;
        }
        selector.each(calcEqualHeight).height(maxHeight);
    }

    equalHeights($('.ffb-portfolio-content-2'));
});

Answer 2

这将在DOM准备就绪时运行，不一定在所有资源都已加载时运行，如图像。

如果您碰巧在这些列中有图像，这可能是罪魁祸首。尝试在$（window）.load（）中包装你的equalHeights调用，如下所示：

(function() {
    function equalHeights(selector) {
        var maxHeight = 0;
        function calcEqualHeight() {
            var el = $(this);
            maxHeight = el.height() > maxHeight ? el.height() : maxHeight;
        }
        selector.each(calcEqualHeight).height(maxHeight);
    }

    //run equalHeights once everything is loaded
    $(window).load(function(){
        equalHeights($('.ffb-portfolio-content-2'));
    });

})();

如果用户缩放浏览器，请不要忘记列高也会有所不同......所以你可能想在$（window）.resize（）上调用该函数。

等列JS忽略内容

2 个答案: