如何根据变量为fa-circle图标应用对应CSS颜色样式

我们可以通过**服务端（PHP）或者客户端（JavaScript）**两种方式，根据评分值为fa-circle图标设置对应的交通灯颜色。先明确评分与颜色的映射关系（可按需调整）：

• Outstanding → 绿色（#2ecc71）
• Very Good → 蓝色（#3498db）
• Good → 黄色（#f1c40f）
• Adequate → 橙色（#f39c12）
• Needs Improvement → 红色（#e74c3c）

第一步：修正原代码的语法问题 #

原代码中<td>标签的class属性写法有误（多余分号和引号），需修正为标准格式：

<td style="width: 60.0000%;background-color: #ffffff;color: #000000;" class="outcome">

方式一：服务端（PHP）实现 #

直接在PHP输出时，根据评分值为图标添加对应颜色类，用CSS管理颜色更易维护：

1. 添加CSS样式 #

在页面<head>中插入：

.rating-green { color: #2ecc71; }
.rating-blue { color: #3498db; }
.rating-yellow { color: #f1c40f; }
.rating-orange { color: #f39c12; }
.rating-red { color: #e74c3c; }

2. 修改PHP逻辑 #

编写辅助函数根据评分返回颜色类：

<?php
function getRatingColorClass($rating) {
    switch(trim($rating)) {
        case 'Outstanding':
            return 'rating-green';
        case 'Very Good':
            return 'rating-blue';
        case 'Good':
            return 'rating-yellow';
        case 'Adequate':
            return 'rating-orange';
        case 'Needs Improvement':
            return 'rating-red';
        default:
            return '';
    }
}
?>

然后修改表格图标代码（以Overall行为例）：

<tr>
    <td style="width: 40.0000%;">Overall<br></td>
    <td style="width: 60.0000%;background-color: #ffffff;color: #000000;" class="outcome">
        <i class="fa fa-circle <?php echo getRatingColorClass($user['rating']); ?>" aria-hidden="true"></i>&nbsp;<br>
        <?php echo $user['rating']?>
    </td>
</tr>

其他评分行（Care & Support、Environment等）按相同方式替换即可。

方式二：客户端（JavaScript）实现 #

若无法修改服务端代码，可通过前端JS动态设置图标颜色：

1. 添加CSS样式（可选，也可直接用内联样式） #

.rating-green { color: #2ecc71; }
.rating-blue { color: #3498db; }
.rating-yellow { color: #f1c40f; }
.rating-orange { color: #f39c12; }
.rating-red { color: #e74c3c; }

2. 插入JavaScript代码 #

在页面底部（DOM加载完成后）添加：

// 评分-颜色类映射
const ratingColorMap = {
    'Outstanding': 'rating-green',
    'Very Good': 'rating-blue',
    'Good': 'rating-yellow',
    'Adequate': 'rating-orange',
    'Needs Improvement': 'rating-red'
};

// 遍历所有评分单元格
document.querySelectorAll('.outcome').forEach(cell => {
    const icon = cell.querySelector('.fa-circle');
    if (!icon) return;
    // 获取评分文本（去除多余空格和换行）
    const ratingText = cell.textContent.trim().split('\n').filter(text => text.trim()).pop();
    // 设置颜色类
    if (ratingColorMap[ratingText]) {
        icon.classList.add(ratingColorMap[ratingText]);
    }
});

如果不想用CSS类，可直接设置内联样式：

const ratingColorMap = {
    'Outstanding': '#2ecc71',
    'Very Good': '#3498db',
    'Good': '#f1c40f',
    'Adequate': '#f39c12',
    'Needs Improvement': '#e74c3c'
};

document.querySelectorAll('.outcome').forEach(cell => {
    const icon = cell.querySelector('.fa-circle');
    if (!icon) return;
    const ratingText = cell.textContent.trim().split('\n').filter(text => text.trim()).pop();
    if (ratingColorMap[ratingText]) {
        icon.style.color = ratingColorMap[ratingText];
    }
});

内容的提问来源于stack exchange，提问作者Herbs