Question

我做了一个jQuery脚本来检测3个盒子的大小。我检测到最大的高度（它有效），我设法将最大的尺寸添加到三个盒子中。

仅限，它仅在页面加载时有效。我放了一个调整大小，但当我执行def func(x): x[0] = 3 return x = [1] print x func(x) print x OUTPUT: [1] [3]时，即使缩小窗口，该值也始终保持不变。所以，我的盒子不适合。

你能帮助我吗？

谢谢

console.log(maxHeight)

Answer 1

tl; dr 在比较之前使用.height("auto")重置高度。

您需要使用.height("auto")重置高度。

另外，您可以考虑将此代码包装在$(document).ready()中，以便在dom实际就绪时运行。可以提取均衡功能，使其更具功能性和无状态。见this codepen;

<强> JavaScript的：

var equalize = function(selector){
  var maxHeight = 0;
  $(selector).each(function(idx,el){
    $(el).height("auto"); // resetting height
    var h = $(el).height();
    if (h > maxHeight) { maxHeight = h; }
  });

  $(selector).each(function(idx,el){
    $(el).height(maxHeight);
  });
}

$(document).ready(function(){
  equalize(".sliderBlog"); // resize when dom ready

  // register the resize event listener with debounce
  $(window).on("resize", function() {
    setTimeout(function(){
       equalize(".sliderBlog");
    }, 500); // 500ms debounce before calling the function
  });
})

注意：根据需要微调去抖时间。

Answer 2

尝试使用这些

$(window).on("resize", function() {
var maxHeight = 0;

$('.sliderBlog').each(function(){
   var thisH = $(this).height();
   if (thisH > maxHeight) { maxHeight = thisH; }
});
$('.sliderBlog').height(maxHeight) 
});

Answer 3

您似乎正在组合两种不同的调整大小方法。

$(window).on("resize", function(){});是一个DOM事件监听器。

$(selector).resize(function(){});是jQuery method

无论如何，你所寻找的东西都接近你所拥有的。下面我修复了你的代码并将其包装在去抖动函数中（read here以了解原因）。

var setToMax = debounce(function() {
    var maxHeight = 0;
    $('.sliderBlog').each(function(){
        var thisH = $(this).height();
        if (thisH > maxHeight) {
            maxHeight = thisH;
        }
    });
    $('.sliderBlog').height(maxHeight) 
}, 250, true);

window.addEventListener('resize', setToMax);

function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

您可以在此JSFiddle看到一个正常运作的示例。

jQuery比较3个项目并添加最大的大小

3 个答案: