我希望根据 Javascript 中的字符串输入隐藏列表项

Question

所以我在下面的div中有这些列表项：

<div class="container">
<h2>Dissapearing Game</h2>
<div>
<li class="list-group-item go" id="item">Door#1</li>
<li class="list-group-item go" id="item">Door#2</li>
<li class="list-group-item go" id="item">Door#3</li>
<li class="list-group-item go" id="item">Door#4</li>
<li class="list-group-item go" id="item">Door#5</li>
</div>

我的目标是在输入字符串"None"时使它们消失。 JavaScript是这样的：

<script type="text/javascript">
var TextInsideLi0 = document.querySelectorAll('li')[0].innerHTML; // Retrieving text line 1
var TextInsideLi1 = document.querySelectorAll('li')[1].innerHTML; // Retrieving text line 2
var TextInsideLi2 = document.querySelectorAll('li')[2].innerHTML; // Retrieving text line 3
var TextInsideLi3 = document.querySelectorAll('li')[3].innerHTML; // Retrieving text line 4
var TextInsideLi4 = document.querySelectorAll('li')[4].innerHTML; // Retrieving text line 5

var MenuItems = document.querySelectorAll('.go'); // Retrieves the Menu Item by Class 'go'

//BELOW executes the CSS to hide the list item when "None" string is entered:
if (TextInsideLi0 == "None") {
MenuItems[0].classList.add('hidden')            
} else if (TextInsideLi1 == "None") {
MenuItems[1].classList.add('hidden')
} else if (TextInsideLi2 == "None") {
MenuItems[2].classList.add('hidden')
} else if (TextInsideLi3 == "None") {
MenuItems[3].classList.add('hidden')
} else if (TextInsideLi4 == "None") {
MenuItems[4].classList.add('hidden')
}
</script>

以上适用于 5 个列表项。 我只是想要为其添加 for 循环的线索，这将允许我输入具有相同功能的无限列表项。

Answer 1

您不能为每个项目提供相同的 ID。

<li class="list-group-item go" id="item1">Door#1</li>
<li class="list-group-item go" id="item2">Door#2</li>
<li class="list-group-item go" id="item3">Door#3</li>
<li class="list-group-item go" id="item4">Door#4</li>
<li class="list-group-item go" id="item5">Door#5</li>

你可以用这些做整个事情。 使用页面上 li 元素上的循环，您可以控制它们中的每一个 innerHTML 并给它们一个类。

const allElements = document.querySelectorAll(".list-group-item");
allElements.forEach(element => {
if(element.innerHTML == "None") {
element.classList.add("hidden");
}
});

Answer 2

正如CanUver所提到的，不允许对多个html元素使用相同的ID。除此之外，您的问题不需要每个菜单条目的任何 ID。正如你已经说过的，你可以获取你的菜单元素，所以你需要做的就是遍历菜单的内部元素，检查内部html并附加你想要的css类。

Answer 3

您可以获取容器或任何父元素的子元素并遍历它们document.querySelector('.container').children访问此处获取参考 https://www.w3schools.com/jsref/prop_element_children.asp

Answer 4

呃

！您可以使用此代码段执行您所描述的操作：

document
// select all `li.go` items
.querySelectorAll("li.go")
// set `hidden` attribute to `true` when the specified text has been found
.forEach((item) => (item.innerText === "None" ? (item.hidden = true) : null));

这是我使用的：

• 对于每个方法

• 内部文本属性

• 隐藏属性

再见！