javascript - 调整大小时重新计算高度，视口(viewport) < 680 处为 "destroy script"

Question

我在我的网站上使用了一个脚本，它计算具有相同 .sh 类的其他 div 的最高高度。两者的高度相同。这可以工作，但在视口(viewport) < 680 上它不需要工作。另外，在调整视口(viewport)大小时，高度不会更新/重新计算。

谁能帮我解决这个问题吗？

我举了一个例子。 https://jsfiddle.net/ctb9f3c1/

jQuery(document).ready(resizeTheHeights);
function resizeTheHeights() {
    var allHeights = [];
    $('.sh').each(function() {
        var thisHeight = $(this).height();
        allHeights.push(thisHeight);
    });
    var highestHeight = Math.max.apply(Math, allHeights);
    $('.sh').height(highestHeight);
}

Answer 1

我已经更新了一个应该有效的解决方案。您应该在调整大小事件上调用该函数，并在函数中添加一个检查以返回窗口宽度是否小于 680。

jQuery(document).ready(function init() {
    resizeTheHeights();
    $( window ).resize(function() { //this is for on resize trigger of this function
       resizeTheHeights();
    });
}());
function resizeTheHeights(allHeights ) {
    if ($( window ).width() < 680) {
       $('.sh').height(''); //set this to 'auto' if you havent set heights specifically in css, as in my fiddle
       return; //this makes it not work for heights less than 680
    }
    var allHeights = [];
    $('.sh').each(function() {
        var thisHeight = $(this).height();
        allHeights.push(thisHeight);
    });
    var highestHeight = Math.max.apply(Math, allHeights);
    $('.sh').height(highestHeight);
}

这是一个工作的 jsfiddle，尝试调整结果窗口的大小以查看它的工作情况。 https://jsfiddle.net/649n8dmc/