引导列表组状态(危险、成功,..)基于值

Question

我正在尝试根据列中的数字更改引导列表的颜色/状态。

像这样：

=< 25 = success
> 25 = warning
> 30 = danger

静态列表我现在正在使用。

<li class="list-group-item list-group-item-success">18</li>
<li class="list-group-item list-group-item-warning">26</li>
<li class="list-group-item list-group-item-danger">33</li>

我是HTML和Javascript的新手，自己无法弄清楚。任何帮助将不胜感激！谢谢！

Answer 1

你可以做这样的事情。这将添加类list-group-item-X其中 X 是"成功"、"警告"或"危险"，具体取决于元素编号

let items = document.getElementsByClassName("list-group-item");
for(let i = 0; i < items.length; i++) {
let number = parseInt(items[i].innerHTML);
let type = "";
if(number <= 25) {
type = "success";
} 
if(number > 25) {
type = "warning";
}

if(number > 30) {
type = "danger"
}
items[i].classList.add("list-group-item-" +type)
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<li class="list-group-item">18</li>
<li class="list-group-item">26</li>
<li class="list-group-item">33</li>