Question

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

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

＆lt;％＃Eval（＆＃34; ProjectStatus＆＃34;）％＆gt;

和我的工作不正常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>

所以我的目标是检查哪个文本具有该范围，并根据该文本替换其类。如果其已完成设置类=＆＃39;标签标签 - 成功＆＃39;等等。感谢。

Answer 1

您似乎只想将span的类从label-default更改为label-success。我不建议您删除所有跨度并重新添加新跨度以实现此目的。你可以简单地改变他们的课程。

＆＃13;

// 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");
  }
}

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

不熟悉asp.net，但我认为你想要更像这样的东西：

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

if (statusText === "Completed") {
    statusElem.className = 'label label-success';
}

这将更改SINGLE状态元素的类名。如果您要创建一个包含多个跨度的表，您可能希望执行以下操作：

var statusElems = document.getElementsByClassName("label");
for (var i=0;i<statusElems.length;i++) {
    var statusElem = statusElems[i];
    var statusText = statusElem.innerHTML;

    if (statusText === "Completed") {
        statusElem.className = 'label label-success';
    }
}

Answer 3

ID必须是唯一的。尝试按类名选择元素并迭代这些找到的元素，检查innerHTML是否等于Completed。

代码将是这样的：

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

Here是一个工作小提琴。

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

3 个答案: