Question

我正在使用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";
    }
}

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

Answer 1

将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>

希望有帮助，

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

1 个答案: