变量超出范围

Question

我正在制作响应式背景视频。我有这个代码。

<video id="bgvideo" />

function scaleVideo() {

    var windowHeight = $(window).height();
    var windowWidth = $(window).width();

    var videoNativeWidth = $('video#bgvideo')[0].videoWidth;
    var videoNativeHeight = $('video#bgvideo')[0].videoHeight;


    var heightScaleFactor = windowHeight / videoNativeHeight;
    var widthScaleFactor = windowWidth / videoNativeWidth;


    if (widthScaleFactor >= heightScaleFactor) {
        var scale = widthScaleFactor;
    } else {
        var scale = heightScaleFactor;
    }

    var scaledVideoHeight = videoNativeHeight * scale;
    var scaledVideoWidth  = videoNativeWidth * scale;

    $('video#bgvideo').height(scaledVideoHeight);
    $('video#bgvideo').width(scaledVideoWidth);
}

我正在使用grunt来编译我的代码等。 咕噜咕噜的Jshint说我正在使用“规模”超出范围，我不明白为什么。

有什么建议吗？

Answer 1

如果您想在var scale = heightScaleFactor;语句之外使用它，则不应在else语句中写{。}}。

在scale

之外初始化if

 var scale;
 if (widthScaleFactor >= heightScaleFactor) {
     scale = widthScaleFactor;
 } else {
     scale = heightScaleFactor;
 }

Answer 2

请改为尝试：

function scaleVideo() {
    var scale; //this is the change

    var windowHeight = $(window).height();
    var windowWidth = $(window).width();

    var videoNativeWidth = $('video#bgvideo')[0].videoWidth;
    var videoNativeHeight = $('video#bgvideo')[0].videoHeight;


    var heightScaleFactor = windowHeight / videoNativeHeight;
    var widthScaleFactor = windowWidth / videoNativeWidth;


    if (widthScaleFactor >= heightScaleFactor) {
        scale = widthScaleFactor; //simply modify the value here
    } else {
        scale = heightScaleFactor;
    }

    var scaledVideoHeight = videoNativeHeight * scale;
    var scaledVideoWidth  = videoNativeWidth * scale;

    $('video#bgvideo').height(scaledVideoHeight);
    $('video#bgvideo').width(scaledVideoWidth);
}