Javascript 检查页面上所有 <span> 标签 ID

Question

我需要检查 Span 的文本，并根据文本将其替换为 Span 类。它使用 asp Repeater 并创建一个表。

<span class="label label-default" id="status">

<%# Eval("项目状态")%>

我的 JavaScript 不工作:

var status = document.getElementById('status').innerHTML;

          for (var i = 0; i < status.length; i++) {
              if (status === "Completed") {
                  status[i].innerHTML = "<span class='label label-success'> + status + </span>";
              }
          }

所以编译后的代码如下所示:

<span class="label label-default" id="status">Completed</span>
<span class="label label-default" id="status">Hopper</span>

所以我的目标是检查哪个文本具有该跨度并根据该文本替换其类。如果其 Completed 设置 class='label label-success' 等等。谢谢。

Answer 1

您似乎只想将 span 的类从 label-default 更改为 label-success。我不建议您删除所有跨度并重新添加新跨度来实现此目的。您只需更改他们的类(class)即可。

// get all spans with class='label-default'
var spans = document.querySelectorAll("span.label-default");
for (var i = 0; i < spans.length; i++) {
  // if span contains the text Completed, replace label-default with label-success in the span's class list
  if (spans[i].innerHTML == "Completed") {
    spans[i].className = spans[i].className.replace(/\blabel-default\b/, "label-success");
  }
}

.label-default {
  background-color: grey;
}
.label-success {
  background-color: green;
}

<span class='label-default'>Completed</span>
<span class='label-default'>Failed</span>
<span class='label-default'>Completed</span>
<span class='label-default'>Completed</span>
<span class='label-default'>Starting</span>
<span class='label-default'>Failed</span>
<span class='label-default'>Completed</span>