带有多个elseif的Javascript if语句

Question

我使用下面的if语句来比较表中同一列中的2行.我多次使用相同的代码块来对不同的列执行相同的计算.

基本上,我想要一个箭头显示一行和下一行之间的值移动,以及值落入的阈值.因此,例如,在下面的代码中,任何大于15的应该是一个红色箭头,如果之前的值低,那么箭头应该指向上方.我使用稍后在我的代码中从另一个位置调用的图像渲染箭头,因此if语句只给出了相应箭头的字符串.

正如我上面所说,我有多次相同的代码块.奇怪的是,输出适用于某些变量而不适用于其他变量; 即使它是替换变量名称的完全相同的代码!由于没有明显的原因,它给了我错误的有时候.

我有太多条件吗？有没有更有效的方法来做我想做的事情？

任何帮助将不胜感激!

谢谢,卡尔

var Arrow = " ";
if(KPI[0] > KPI[1] && KPI[0] >= 15)
{
    Arrow = "redarrowup.png";
}
else if(KPI[0] < KPI[1] && KPI[0] >= 15)
{
    Arrow = "redarrowdown.png";
}
else if(KPI[0] = KPI[1] && KPI[0] >= 15)
{
    Arrow = "redarrowflat.png";
}
else if(KPI[0] > KPI[1] && KPI[0] >= 10 && KPI[0] < 15)
{
    Arrow = "yellowarrowup.png";
}
else if(KPI[0] < KPI[1] && KPI[0] >= 10 && KPI[0] < 15)
{
    Arrow = "yellowarrowdown.png";
}
else if(KPI[0] = KPI[1] && KPI[0] >= 10 && KPI[0] < 15)
{
    Arrow = "yellowarrowflat.png";
}
else if(KPI[0] > KPI[1] && KPI[0] < 10)
{   
    Arrow = "greenarrowup.png";
}
else if(KPI[0] < KPI[1] && KPI[0] < 10)
{   
    Arrow = "greenarrowdown.png";
}
else
{
    Arrow = "greenarrowflat.png";
}

Answer 1

我建议分别表达不同的概念,然后在最后将它们组合起来.像这样:

var arrow;
var movement = "flat";
var band = "green";

if (KPI[0] > KPI[1]) {
    movement = "up";
} else if (KPI[0] < KPI[1]) {
    movement = "down";
}

if (KPI[0] >= 15) {
    band = "red";
} else if (KPI[0] >= 10) {
    band = "yellow";
}

arrow = band + "arrow" + movement + ".png";

您还可以将这些元素中的每一个推迟到函数中,因此最后一行将显示为:

arrow = getBand(KPI[0], KPI[1]) + "arrow" + getMovement(KPI[0], KPI[1]) + ".png";

这样可以更容易地改变频带,而与其他逻辑隔离.