Question

我正在尝试根据列中的编号更改Bootstrap列表的颜色/状态。

类似：

   =< 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和Java脚本的新手，自己无法弄清楚。任何帮助，将不胜感激！谢谢！

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>

基于值的引导程序列表组状态（危险，成功等）

1 个答案: