检测元素高度变化并在太小时隐藏
Detect element height changes and hide if too small
我正在使用支付网关小部件,需要检测其高度何时发生变化。为此,我需要定位容器中的第一个 .col-xs-12
并检测其高度是否已更改。
如果它的高度改变了,那么我需要检查高度是否小于310px
。
如果是这样,我需要隐藏整行。
我已经尝试了您在下面看到的方法,但它似乎不起作用。
var $paywhirlWidget = $("#payment-signup-section .container .row .col-xs-12:first-child"),
lastHeight = $("#payment-signup-section .container .row .col-xs-12:first-child").height();
function checkForChanges() {
if ($paywhirlWidget.height() != lastHeight) {
if($paywhirlWidget.height() <= 310) {
$paywhirlWidget.css("display", "none");
}
lastHeight = $paywhirlWidget.height();
}
}
setTimeout(checkForChanges, 500);
根据要求:我立即注意到的几件事是您正在使用 setTimeout,它只执行一次。您将寻找函数 setInterval() 来继续检查大小是否更新。
我正在使用支付网关小部件,需要检测其高度何时发生变化。为此,我需要定位容器中的第一个 .col-xs-12
并检测其高度是否已更改。
如果它的高度改变了,那么我需要检查高度是否小于310px
。
如果是这样,我需要隐藏整行。
我已经尝试了您在下面看到的方法,但它似乎不起作用。
var $paywhirlWidget = $("#payment-signup-section .container .row .col-xs-12:first-child"),
lastHeight = $("#payment-signup-section .container .row .col-xs-12:first-child").height();
function checkForChanges() {
if ($paywhirlWidget.height() != lastHeight) {
if($paywhirlWidget.height() <= 310) {
$paywhirlWidget.css("display", "none");
}
lastHeight = $paywhirlWidget.height();
}
}
setTimeout(checkForChanges, 500);
根据要求:我立即注意到的几件事是您正在使用 setTimeout,它只执行一次。您将寻找函数 setInterval() 来继续检查大小是否更新。