在调整大小时重新计算高度和 "destroy script" 在视口 < 680

Question

我在我的网站上使用了一个脚本，它使用相同的 .sh class 计算另一个 div 的最高高度。两者高度相同。这有效，但在 < 680 的视口上它不需要工作。同样在调整视口大小时，高度不是 updated/recalculated.

谁能帮我解决这个问题？

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

像这样修改脚本

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...
}

Answer 2

我已经更新了一个应该有效的解决方案。您应该在调整大小事件上调用函数，如果 window 的宽度小于 680.

，则在函数内添加对 return 的检查

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，请尝试调整结果的大小 window 以查看它是否有效。 https://jsfiddle.net/649n8dmc/

在调整大小时重新计算高度和 "destroy script" 在视口 < 680

On resize recalculate height and "destroy script" at viewport < 680

javascript

jquery

resize

responsive-design