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

Question

我有一个代码可以根据单元格 (1-6) 中的值更改 html 表格单元格的颜色。以前代码只给数字 1-5 赋值，而且效果很好。我今天添加了 6 号，但它仍然像 5 号一样分配颜色。

facepalm有什么想法吗？

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

很遗憾，您的问题不够清楚，但我仍然回答我对您问题的理解。我还对您的代码进行了一些修改，并为您留下了一些 cmets。

我希望这会有所帮助。

$('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>

Answer 2

您的代码将所有低值类应用到每个节点，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>