一直看着这个js太久了，我错过了什么？

Question

我有一个代码，根据单元格中的值（1-6）更改html表单元格的颜色。以前的代码只给了数字1-5的值，它的工作很完美。我今天加了6次，它仍然分配颜色，如果它是一个5

捂脸什么想法？

的JS：

$(function() { 
    $('tr > td').each(function(index) { 
     var scale = [['Green', 1], ['Red', 2], ['Yellow', 3], ['Transparent', 4], ['Transparent', 5], ['Blue', 6] ]; 
     var score = $(this).text(); 
     for (var i = 0; i < scale.length; i++) { 
      if (score >= scale[i][1]) { 
       $(this).addClass(scale[i][0]); 
      } 
     } 
    }); 
}); 

CSS：

.Green { 
background-color: #7bdb78; 
color: #7bdb78; 
border: 1px solid black;} 
.Red { 
    background-color: #db7878; 
    color: #db7878; 
} 

.Yellow { 
    background-color: #fcff82; 
    color: #fcff82; 
} 
.Blue { 
    background-color:#3399FF; 
    color: #3399FF; 
} 


.Transparent { 
    background-color: rgba(255, 255, 255, 0); 
    color: rgba(255, 255, 255, 0); 
    border-color: rgba(255, 255, 255, 0); 
    } 

Answer 1

您的代码应用所有较低值类别的每个节点和所述Transparent类定义重写等。

我想你会希望以相反的顺序循环，并尽快为类添加爆发：

$(function() { 
 
    $('tr > td').each(function(index) { 
 
     var scale = [['Green', 1], ['Red', 2], ['Yellow', 3], ['Transparent', 4], ['Transparent', 5], ['Blue', 6] ]; 
 
     var score = $(this).text(); 
 
     for (var i = scale.length - 1; i >= 0; i--) { 
 
      if (score >= scale[i][1]) { 
 
       $(this).addClass(scale[i][0]); 
 
       break; 
 
      } 
 
     } 
 
    }); 
 
});

.Green { 
 
background-color: #7bdb78; 
 
color: #7bdb78; 
 
border: 1px solid black;} 
 
.Red { 
 
    background-color: #db7878; 
 
    color: #db7878; 
 
} 
 

 
.Yellow { 
 
    background-color: #fcff82; 
 
    color: #fcff82; 
 
} 
 
.Blue { 
 
    background-color:#3399FF; 
 
    color: #3399FF; 
 
} 
 

 

 
.Transparent { 
 
    background-color: rgba(255, 255, 255, 0); 
 
    color: rgba(255, 255, 255, 0); 
 
    border-color: rgba(255, 255, 255, 0); 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
<tr> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    <td>3</td> 
 
    <td>4</td> 
 
    <td>5</td> 
 
    <td>6</td> 
 
</tr> 
 
</table>

Answer 2

不幸的是，你的问题是不够清楚，但仍我回答了我对你的问题的理解。我也修改了一下你的代码，我给你留下了一些评论。

我希望有帮助。

$('tr > td').each(function(index) { 
 
/* 
 
I would't use 2d array to store both of class name and the ref number, 1d array is enough 
 
*/ 
 
/* 
 
var scale = [['Green', 1], ['Red', 2], ['Yellow', 3], ['Transparent', 4], ['Transparent', 5], ['Blue', 6] ]; 
 
*/ 
 
    var scale = ['green','red','yellow','transparent','transparent','blue','error']; 
 
    
 
    // I think that this func is very important to vlid index value 
 
    function isVlid(){ 
 
    var arg = arguments[0], 
 
     length = scale.length -1; 
 
    return arg < length && arg >= 0 ? arg : length; 
 
    } 
 
    
 
    
 
    // you don't need run inner loop to search inside the array 
 
    var score = parseInt($(this).text()); 
 
    $(this).addClass(scale[isVlid(score)]); 
 
    
 
}); 
 

/* 
 
It's highly recommended to keep attributes names in lower case as a best practices 
 
*/ 
 

 
.green { 
 
    background-color: #7bdb78; 
 
    color: #7bdb78; 
 
    border: 1px solid black; 
 
} 
 

 
.red { 
 
    background-color: #db7878; 
 
    color: #db7878; 
 
} 
 

 
.yellow { 
 
    background-color: #fcff82; 
 
    color: #fcff82; 
 
} 
 

 
.transparent { 
 
    background-color: rgba(255, 255, 255, 0); 
 
    color: rgba(255, 255, 255, 0); 
 
    border-color: rgba(255, 255, 255, 0); 
 
} 
 

 
.blue { 
 
    background-color: #3399FF; 
 
    color: #3399FF; 
 
} 
 

 
.error{ 
 
background-color:#ff0000; 
 
color:#ff0000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<table> 
 
<tr> 
 
<td> -2</td> 
 
</tr> 
 
<tr> 
 
<td> -1</td> 
 
</tr> 
 
<tr> 
 
<td> 0</td> 
 
</tr> 
 
<tr> 
 
<td> 1</td> 
 
</tr> 
 
<tr> 
 
<td> 2</td> 
 
</tr> 
 
<tr> 
 
<td> 3</td> 
 
</tr> 
 
<tr> 
 
<td> 4</td> 
 
</tr> 
 
<tr> 
 
<td> 5</td> 
 
</tr> 
 
<tr> 
 
<td> 6</td> 
 
</tr> 
 
<tr> 
 
<td> 7</td> 
 
</tr> 
 
</table>