Question

我在我的网站上使用脚本，它使用相同的.sh类计算另一个div的最高高度。两者都达到相同的高度。这适用于视口＆lt; 680它不需要工作。此外，在调整视口大小时，不会更新/重新计算高度。

任何人都可以帮我解决这个问题吗？

我做了一个小例子。 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

我已经更新了应该有效的解决方案。您应该在resize事件上调用函数，并在函数内添加一个检查，以便在窗口宽度小于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/

Answer 2

像这样修改脚本

var max = 680;

function resizeTheHeights() {
 // Returns width of browser viewport
 var width = $( window ).width();
 if (width <= max) {
  return;
 }

 // then add the rest of your function body...
}

在调整大小重新计算高度和＆＃34;销毁脚本＆＃34;在视口＆lt; 680

2 个答案: