javascript - Equal Columns JS 忽略内容

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'));
});