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";

这样可以更容易地改变频段，而不是另外这个逻辑。

Answer 2

我会说：

function direction(val1, val2){
  return val1 < val2 ? "down" : val1 == val2 ? "flat" : "up";
}

function color(val){
  return val >= 15 ? "red" : val >= 10 ? "yellow" : "green";
}

var arrow = color(KPI[0]) +"arrow"+ direction(KPI[0], KPI[1]) +".png";

如果您不理解，我总是告诉别人不要复制和粘贴代码。您可能不熟悉?:位。它是ternary operator（内联if）。

如果您需要多个箭头，我建议您添加一个生成箭头的功能：

function arrow(val1, val2){
  return color(val1) +"arrow"+ direction(val1, val2) +".png";
}

var kpiArrow = arrow(KPI[0], KPI[1]);

Answer 3

乍一看，我会说你有一个“=”，你需要一个“==”（甚至“===”）。例如

if(KPI[0] = KPI[1] && KPI[0] >= 15)

应该是

if(KPI[0] == KPI[1] && KPI[0] >= 15)

（或者就像我说的那样===）。等等。 “=”是赋值运算符，它将KPI [0]的值设置为KPI [1]的值，然后返回该值，因此您基本上执行以下操作：

KPI[0] = KPI[1];
if(KPI[1] && KPI[0] >= 15)

我怀疑是什么意思。也就是说，其他几个人已经说过有更好的方法来构建代码。

Answer 4

我认为问题不在于if的数量。但您可以更好地构建代码：

var direction, color;

// set direction

if(KPI[0] > KPI[1])
{
  direction = "up";
}
else if(KPI[0] < KPI[1])
{
  direction = "down";
}
else if(KPI[0] == KPI[1]) // there was an error in this condition, by the way
{
  direction = "flat";
}

// set color

if(KPI[0] >= 15)
{
  color = "red";
}
else if(KPI[0] >= 10 && KPI[0] < 15)
{
  color = "yellow";
}
else if(KPI[0] < 10)
{
  color = "green";
}

var Arrow = color + "arrow" + direction + ".png";

Answer 5

这个怎么样：

var arrow = "";

if (KPI[0] >= 15) {
   arrow = "redarrow";
}
else if (KPI[0] >= 10) {
   arrow = "yellowarrow";
}
else if (KPI[0] < 10) {
   arrow = "greenarrow";
}

if (KPI[0] < KPI[1]) {
   arrow += "down.png";
}
else if (KPI[0] > KPI[1]) {
   arrow += "up.png";
}
else if (KPI[0] == KPI[1]) {
   arrow += "flat.png";
}

带有多个elseif的Javascript if语句

5 个答案: