为什么我的JS函数只操作一个分配给类而不是所有的<div>？
为什么我的JS函数只操作一个分配给类而不是所有的<div>？
提问于 2022-01-17 18:21:22
我有这个JS函数，它最初应该隐藏一个类名为"tw“的函数，当单击一个按钮时，它应该会使它可见。但是，每当我单击该按钮时，它只会更改一个div的可见性。我有4个。我怎么解决这个问题？
function myFunction(){
var elms = document.getElementsByClassName("tw");
Array.from(elms).forEach((x) => {
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
})
}回答 3
Stack Overflow用户
回答已采纳
发布于 2022-01-17 18:29:49
我将您的代码复制到一个非常简单的页面的上下文中(参见下面)，它似乎很有效.我可能遗漏了什么，但问题是否在您的项目的其他地方呢？也许在浏览器控制台中一片一片地调查它可能会有所帮助。
<!DOCTYPE html>
<html>
<script>
function myFunction(){
var elms = document.getElementsByClassName("tw");
Array.from(elms).forEach((x) => {
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
})
}
</script>
<body>
<button onclick="myFunction()">Click me</button>
<div class="tw">1</div>
<div class="tw" style="display: block;">2</div>
<div class="tw">3</div>
<div class="tw" style="display: block;">4</div>
</body>
</html>Stack Overflow用户
发布于 2022-01-17 18:37:33
没有将显示值设置为默认值，因此，当您试图访问从未在css或样式中使用显示的元素时，它将返回undefined or nothing。
这就是为什么在第一个按钮上，如果没有任何显示的元素，单击什么都不会发生，然后由于您的函数，所有这些元素都会通过否则的显示:块，然后在第二个按钮上单击all切换。
我喜欢做的是创建一个像displayNone这样的类
所以在css中：
.displayNone{
display:none;
}然后，每当您想要使元素不可见时，给它这个类，然后单击该按钮，只需移除该类，所有元素就会可见。
就像这样在你的功能中：
function myFunction() {
var elms = document.getElementsByClassName("tw");
console.log(elms);
console.log(Array.from(elms));
Array.from(elms).forEach((x) => x.classList.remove('displayNone')); // just remove the class
}或者，您也可以使用classList.toggle('displayNone)，这样它就可以在display和inital显示之间切换。
Stack Overflow用户
发布于 2022-01-17 18:53:52
我将继续在CSS领域中进行样式化，并在JS中切换一个类来显示元素。另外，当您使用nodeList返回一个querySelectorAll()时，它已经是数组形式了。
将css类添加到CSS中：
.display {
display: block;
}然后，您的JS功能可以通过toggle()进行更多的简化。
let elms = document.querySelectorAll(".tw");
function myFunction() {
elms.forEach(el => el.classList.toggle('display'))
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70745870
复制相关文章
相似问题
腾讯云开发者
