javascript - 列表中的元素高度相等

Question

我希望列表中的所有元素高度相等。为此，我使用 jquery.matchHeigh插入。但是，所选元素不会自动更新

调整屏幕大小时:

我希望自动更新尺寸，但只有在更新时才得到此结果

页面:

我使用的是基本功能:

$('.product-info .product-name').matchHeight({ property: 'min-height' });

完整代码为here .

我正在使用Owl Carousel列表。

Answer 1

这里的问题似乎只是窗口大小调整和实际 window.resize 事件触发之间的滞后时间问题。通过将事件包装在窗口调整大小中并添加轻微的超时，我设法解决了该问题:

var lagTime = 500;   //Play around with this number
$(window).on("resize", function() {
    setTimeout(function() {
    $('.product-info .product-name').matchHeight({
        property: 'min-height'
    })}
    , lagTime);
}).trigger("resize");

请注意，我还在其末尾添加了 .trigger()，它将在页面加载时触发 resize 事件。

<小时/>

考虑根据需要减少 lagTime 变量，您应该能够使用低于我在本示例中使用的 500 的值。