切换可见性无效 (HTML/CSS/Javascript)

Question

我正在关注 W3Schools 的 this tutorial 如何使用 HTML、CSS 和 Javascript 制作幻灯片。在我正在开发的网站上，我希望最初隐藏底部的缩略图和两侧的箭头，直到用户按下按钮。

为此，我在 CSS 文件中设置了 visibility: hidden;。 class dot 的CSS 代码如下：

.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    visibility: hidden;
    transition: background-color 0.6s ease;  
}

在按钮的 Javascript 操作中，我已将 class "dot" 下文档元素的可见性设置为可见，如下所示：

document.getElementsByClassName("dot").style.visibility="visible";

我已验证通过 alert() 视图按下按钮时会触发此操作。在此命令之前，每一行代码似乎都运行符合预期。此外，底部的缩略图（"dot" 元素）不会出现，因此它们的可见性不会像预期的那样可见。

关于为什么会这样或者我该如何解决的任何想法？非常感谢您的帮助！

Answer 1

此 document.getElementsByClassName("dot") returns 数组，您不能将 style 属性应用到数组。

我会给你一些关于你如何处理或重新考虑这个问题的想法。

1) 遍历数组并对每个元素应用样式

var elements = document.getElementsByClassName("dot")
for(var i = 0; i < elements.length; i++) {
    elements[i].style.visibility = "visible";
}

2) 给每个 class 一个 ID 并调用 document.getElementById("someID")

<div id="one">one</div>
<div id="two">two</div>
<div id="three">three</div>

document.getElementyById("one").style.visibility = "visible";
document.getElementyById("two").style.visibility = "hidden";
document.getElementyById("three").style.visibility = "hidden";

Answer 2

document.getElementsByClassName() 将 return 一个数组。

如果您只有一个元素，您可以使用数组中的第一个索引：

document.getElementsByClassName("dot")[0].style.visibility="visible";

否则，如果你有更多：

var dot = document.getElementsByClassName("dot")
for(var i = 0; i < dot.length; i++) {
    dot[i].style.visibility = "visible";
}

切换可见性无效 (HTML/CSS/Javascript)

Toggle Visibility Not Working (HTML/CSS/Javascript)

html

javascript

css

visible