只适用一种情况

时间:2012-07-04 16:47:02

标签: javascript if-statement

if(bmi < 18.5 )
{
    element1.backgroundColor =  colour;
    $(document).ready(function(){
      $(".C_underArrow").show();
       });
}

else if (bmi>= 18.5 && bmi<= 24.9)
{
  element2.backgroundColor =  colour;
   $(document).ready(function(){    
     $(".C_normalArrow").show();
    });
}

我试图为表格着色。

根据输入“bmi”...决定使用哪种条件,例如第一个条件,然后将element1着色。

当我更改输入值..并进入另一个条件并着色element2时,它会使element1保持颜色。

我想在每个新输入值上着色一行

我该如何解决?

编辑:添加HTML代码

<table class="C_resultTable">


<tr id="id1">
<td >
<img id="ID_underArrow" class="C_underArrow" width="30" height="30" src="right-arrow.gif" />
</tr>
</td>


<tr id="id2">
<td >
<img id="ID_normalArrow" class="C_normalArrow" width="30" height="30" src="right-arrow.gif" />
</tr>
</td>


<tr id="id3">
<td >
<img id="ID_overArrow" class="C_overArrow" width="30" height="30" src="right-arrow.gif" />
</tr>
</td>


<tr id="id4">
<td >
<img id="ID_ObeseArrow" class="C_ObeseArrow" width="30" height="30" src="right-arrow.gif" />
</td>
</td>       

</table>

1 个答案:

答案 0 :(得分:0)

您可以存储在当前彩色行的全局变量上。 (我的代码段上的var colouredElement

没有jQuery

if (colouredElement != null)
    colouredElement.backgroundColor = '';

if(bmi < 18.5 )
{
    colouredElement = element1;
    element1.backgroundColor =  colour;
    $(document).ready(function(){
      $(".C_underArrow").show();
    });
}    
else if (bmi>= 18.5 && bmi<= 24.9)
{
     colouredElement = element2;
     element2.backgroundColor =  colour;
     $(document).ready(function(){  
      $(".C_normalArrow").show();
    });
}

使用jQuery

if ($colouredElement != null)
    $colouredElement.css({ backgroundColor: ''});

if(bmi < 18.5 )
{
    $colouredElement = $('table.C_resultTable tr:nth-child(1)');
    $colouredElement.css({backgroundColor: colour});
    $(document).ready(function(){
      $(".C_underArrow").show();
    });
}    
else if (bmi>= 18.5 && bmi<= 24.9)
{
    $colouredElement = $('table.C_resultTable tr:nth-child(2)');
    $colouredElement.css({backgroundColor: ''});
     $(document).ready(function(){  
      $(".C_normalArrow").show();
    });
}