一直看着這個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>