Bootstrap3+jQuery实现徽章颜色随值切换失效问题求助

我来帮你梳理下代码里的几个关键问题，这些问题导致你的徽章颜色始终保持灰色：

1. <span>元素不支持onload事件 #

onload属性仅适用于部分元素（比如<body>、<img>、<script>），<span>并没有这个事件，所以你的ratingColor()函数根本没有被执行过，自然不会触发样式变化。

你需要在DOM加载完成后调用这个函数，利用jQuery的$(document).ready()是最方便的方式（毕竟你已经在使用jQuery了）。

2. JS方法名拼写错误 #

你写的document.getElementsById是错误的，正确的方法是document.getElementById（注意是Element单数，因为ID是唯一的，只会返回单个元素）。

3. 评分数值提取方式不可靠 #

a.charAt(8)依赖固定的文本位置，一旦评分变成两位数（比如"Rating: 10/10"）或者文本格式微调，就会拿到错误的数值。推荐用更健壮的方式提取数字：

• 正则匹配：直接提取文本中的第一个数字
• 字符串分割：按固定分隔符拆分文本获取数值

4. Bootstrap 3类名不匹配 #

你用的badge-error、badge-warning、badge-success是Bootstrap 2的类名，Bootstrap 3已经废弃了这些命名。你有两种选择：

• 改用Bootstrap 3的label-*类（比如label-danger、label-warning、label-success）
• 自定义CSS样式，保留你原来的类名

修正后的完整代码 #

HTML（移除无效的onload） #

<span class="badge" id="rating">Rating: 0/10</span>

JS（用jQuery确保DOM加载完成后执行） #

$(document).ready(function() {
  function ratingColor() {
    // 获取徽章元素
    const badgeEl = document.getElementById("rating");
    // 提取评分数值（正则匹配第一个数字）
    const ratingNum = parseInt(badgeEl.textContent.match(/\d+/)[0], 10);
    
    // 重置类名，避免多类叠加导致样式冲突
    badgeEl.className = "badge";
    
    // 根据评分添加对应颜色类
    if (ratingNum < 5) {
      badgeEl.classList.add("label-danger");
    } else if (ratingNum >= 5 && ratingNum < 7) {
      // 修正原条件：原条件漏掉了num=5的情况
      badgeEl.classList.add("label-warning");
    } else {
      badgeEl.classList.add("label-success");
    }
  }

  // 调用函数执行颜色逻辑
  ratingColor();
});

可选：自定义徽章颜色样式 #

如果你不想用label-*类，可以添加以下CSS，继续使用你原来的类名：

.badge.badge-error {
  background-color: #d9534f; /* Bootstrap3危险色 */
}
.badge.badge-warning {
  background-color: #f0ad4e; /* Bootstrap3警告色 */
}
.badge.badge-success {
  background-color: #5cb85c; /* Bootstrap3成功色 */
}

此时JS里的类名就可以改回你原来的badge-error等。

这样修改后，徽章就会根据评分数值自动切换颜色了。

内容的提问来源于stack exchange，提问作者Alberto Sánchez Ruiz