时间戳

首页 > 解决方案 > 如何根据显示的值更改徽章颜色

javascript - 如何根据显示的值更改徽章颜色

问题描述

我正在使用 HTML、Bootstrap 3 和 jQuery 设计网站的前端部分。我想根据它的值更改徽章的颜色（将来它将从数据库中获取值，现在它在 HTML 上），但它现在不起作用。

我的 HTML 文件中有这个

<span class="badge" id = "rating" onload="ratingColor()">Rating: 0/10</span>

这在我的 js 文件中

function ratingColor() {
    var a=document.getElementsById("rating");
    var num=a.charAt(8);
    if(num<5){
        a.className ="badge badge-error";
    }
    else if(num<7 && num>5){
        a.className ="badge badge-warning";
    }
    else{
        a.className ="badge badge-success";
    }
}

为什么它不起作用？它只是保持灰色。谢谢！

标签： javascriptjqueryhtmltwitter-bootstrap-3

解决方案

将 放入onload一个 body 元素中，然后将您的元素包裹在其中。

ratingColor = () => {
  let el = document.getElementById("rating");
  let num = el.innerText.match(/Rating: ([0-9]+)\//)[1];

  if (num < 5) {
    el.className = "badge badge-error";
  } else if (num < 7 && num > 5) {
    el.className = "badge badge-warning";
  } else {
    el.className = "badge badge-success";
  }
}
<body onload="ratingColor()">
  <span class="badge" id="rating">Rating: 3/10</span>
</body>

或者，或者，如果您onload只需要应用于<span/>元素，您可以这样做：

ratingColor = () => {
  let el = document.getElementById("rating");
  let num = el.innerText.match(/Rating: ([0-9]+)\//)[1];

  if (num < 5) {
    el.className = "badge badge-error";
  } else if (num < 7 && num > 5) {
    el.className = "badge badge-warning";
  } else {
    el.className = "badge badge-success";
  }
}
document.getElementById("rating").onload = ratingColor();
<span class="badge" id="rating">Rating: 3/10</span>

希望有帮助，

推荐阅读