Equal Heights JS

Question

晚上好，

我一直在使用javascript使用以下JS生成相等高度的列：

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

但是，我希望能够添加其他类，并建议将我的代码修改为如下所示。另一个原因是阻止脚本创建一个像上面那样的全局变量。

现在的问题是，第一堂课有效但其他人似乎不是。它们产生的高度却不同。任何人都可以帮我解决问题吗？

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

        equalHeights($('.level-1'));
        equalHeights($('.level-2'));
        equalHeights($('.level-3'));
      })();
</script>

Answer 1

您需要在完成循环后 设置 的高度：

(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($('.level-1'));
    equalHeights($('.level-2'));
    equalHeights($('.level-3'));
  })();