javascript - 只适用一个条件

Question

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>

Answer 1

您可以存储在当前彩色行的全局变量上。（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();
    });
}