Question

我正在尝试使用条件语句if-then-else打印列表，但它不是打印整个列表，而是只打印第一个List元素。它只打印'Bit On'

<html>
<ul id="stt">
    <li>First</li>
    <li></li>
    <li>Third</li>
    <li>Fourth</li>
    <li></li>
    <li>Fifth</li>
</ul>

<script>
var getIt = document.getElementsByTagName("ul");
var txt = "";
for (var i = 0; i < getIt.length; ++i){
    if (getIt.item(i).textContent !== null)
        document.getElementById("stt").innerHTML = "Bit On";
    else
        document.getElementById("stt").innerHTML = "Bit Off";
}   


</script>
</html>

Answer 1

访问类似数组的对象中的元素时，最好使用方括号，例如[i]。您需要分配项目＆＃39; textContent。如果您想要遍历列表而不是ul本身，还需要选择ul 孩子：

＆＃13;

var lis = document.getElementsByTagName("ul")[0].children;
var txt = "";
for (let i = 0; i < lis.length; i++) {
  if (lis[i].textContent)
    lis[i].textContent = "Bit On";
  else
    lis[i].textContent = "Bit Off";
}

＆＃13;

<ul id="stt">
  <li>First</li>
  <li></li>
  <li>Third</li>
  <li>Fourth</li>
  <li></li>
  <li>Fifth</li>
</ul>

＆＃13;

但最好通过querySelectorAll直接选择和迭代：

＆＃13;

document.querySelectorAll('li').forEach(li => {
  if (li.textContent) li.textContent = "Bit On";
  else li.textContent = "Bit Off";
});

＆＃13;

<ul id="stt">
  <li>First</li>
  <li></li>
  <li>Third</li>
  <li>Fourth</li>
  <li></li>
  <li>Fifth</li>
</ul>

＆＃13;

代码更清晰。

Answer 2

您正在选择标签，其中只有1，然后用id stt 再次更改元素，其中只有1个。目前还不清楚你想要做什么，但我认为就是这样：

var getIt = document.getElementsByTagName("li");
for (var i = 0; i < getIt.length; i++){
    if (getIt.item(i).textContent.length === 0)
        getIt.item(i).innerHTML = "Bit On";
    else
        getIt.item(i).innerHTML = "Bit Off";
}

Answer 3

您的代码中的问题是您正在循环错误的元素。 getIt获取标记名为ul的所有元素，并且它只是一个。因此，它将Bit {1}}内容替换为Bit，因为它不是空的。您应该使用ul标记遍历元素。

li

var getIt = document.getElementsByTagName("li");
//console.log(getIt);
for (var i = 0; i < getIt.length; ++i){
    if (getIt.item(i).textContent !== '')
        getIt.item(i).innerHTML = "Bit On";
    else
        getIt.item(i).innerHTML = "Bit Off";
}

在JavaScript中使用条件语句if-else打印列表

3 个答案: