Question

以下代码仅在视口宽度（变量）超过设定宽度时执行函数。

var viewportWidth = $(window).width();

function refit__slider__height(){
    var fitted__height  = $('#promobanner__wrap').height() - 150;

    $('#promobanner--slider').height( fitted__height );
}

$(document).ready(function() {
    if ( viewportWidth > 767 ){
        refit__slider__height();
    }
});

// for the window resize
$(window).resize(function() {
    if ( viewportWidth > 767 ){
        refit__slider__height();
    }
});

但是我注意到当if语句低于767然后调整大小超过767时，JS条件没有被捕获，必须进行页面刷新才能匹配if条件。

有没有人碰到过这个？或者没有解决方案？

Answer 1

您需要在调整大小事件中重新初始化视口宽度，例如

var viewportWidth = $(window).width();
$(document).ready(function() {
    if ( viewportWidth > 767 ){
        refit__slider__height();
    }
    $(window).resize(function() {
        viewportWidth = $(this).width();// re-init width on resizing window
        if ( viewportWidth > 767 ){
            refit__slider__height();
        }
    });
});

jQuery Resize - 初始化函数（如果参数问题）

1 个答案: