Question

我想减小这个if语句的大小，以便它可以连续迭代到20左右，我的模式如下：

    if (i >= 0 && i <= 3) {
        $('.timeline__bar').css({ 
            transform: 'translateX(-0vw)',
        });
    }
    if (i > 3 && i <= 7) {
        $('.timeline__bar').css({ 
            transform: 'translateX(-92vw)',
        });
    }
    if (i > 7 && i <= 11) {
        $('.timeline__bar').css({ 
            transform: 'translateX(-184vw)',
        });
    } 
//ect ect until 20

我每次转换的数量是-92 vh单位，我确定我也可以使用循环模式，但我不确定如何执行此操作。

Answer 1

尝试这样的事情

function trans(num) {
 $('.timeline__bar').css({ 
    transform: 'translateX(-'+(Math.floor(num/4)*92)+'vw)',
 });
}

更新：我使用的是parseInt，但是更改为Math.floor，因为如果循环它会更高效。

Answer 2

对最后两个else if语句使用if而不是if。这将为您提供更好的性能。

Answer 3

您还可以检查此方法并从语句中删除其他检查

var size;

if (i <= 3 && i > 0) {
    size = '0vw';
} else if (i <= 7) {
    size = '-92vw';
} else if(i <= 11) { 
    size = '-184vw'; 
}

$('.timeline__bar').css({ 
    transform: `translateX(${size})`,
});

Answer 4

试试这个。（在循环内部或无论你使用那批ifs的地方）

j = Math.floor(i/4);
param = "translateX(-" + j*92 + "vw)";
$('.timeline__bar').css({ 
            transform: param,
});

Answer 5

这是您要查找的内容，在哪里对>= 0进行外部检查，并在其中使用else if。

使用else if而不是单独的if语句，您只需检查它是否为i <= n，当它验证为true时，它会进入该语句然后逐步退出if/else if链。

if (i >= 0) {
    if (i <= 3) {
        $('.timeline__bar').css({ 
            transform: 'translateX(-0vw)',
        });
    } else if (i <= 7) {
        $('.timeline__bar').css({ 
            transform: 'translateX(-92vw)',
        });
    } else if (i <= 11) {
        $('.timeline__bar').css({ 
            transform: 'translateX(-184vw)',
        });
    } else if (i <= 15) {
        $('.timeline__bar').css({ 
            transform: 'translateX(-276vw)',
        });
    } else if (i <= 19) {
        $('.timeline__bar').css({ 
            transform: 'translateX(-368vw)',
        });
    } 
}

Answer 6

如果您使用if和else if会更好，这使得它不是不必要的代码。并删除不必要的条件，这些条件在之前的if中进行了检查：

if (i >= 0 && i <= 3) {
    $('.timeline__bar').css({ 
        transform: 'translateX(-0vw)',
    });
} else if (i <= 7) { //only one condition here is what you need. :)
    $('.timeline__bar').css({ 
        transform: 'translateX(-92vw)',
    });
} //...

为了使它“更清洁”，您也可以创建一个功能：

function translateTBar(value){
    $('.timeline__bar').css({ transform: 'translateX(-' + value + 'vw)'});
}

if( i >= 0 && i <= 3) { translateTBar(0); }
else if( i <= 7) { translateTBar(92); }
else if( i <= 11) { translateTBar(184); }
//...

Answer 7

将公共代码分解出来并设置变量，如果

则使用else

var translateX = '-0vw'
if (i > 3 && i <= 7) {
 translateX = '-92vw'
} else if (i > 7 && i <= 11) {
  translateX = '-184vw'
}

$('.timeline__bar').css({ 
  transform: 'translateX(' + translateX + ')',
});

我怎样才能压缩这些if语句？

7 个答案: