Question

我正在尝试制作显示/隐藏类型的按钮，以打开和关闭页面上的所有图像。我试着用getElementsByClassName来做。首先，我使用了这个：

if (document.getElementsByClassName('showHide').style.visibility ='visible')
{
 document.getElementsByClassName('showHide').style.visibility == 'hidden' 
}

但是我遇到Uncaught TypeError: Cannot read property 'visibility' of undefined错误。所以我将代码更改为：

var elems = document.getElementsByClassName('showHide');
for (var i=0; i<elems.length; i++){
    if (elems[i].style.visibility == 'visible')
    {
        elems[i].style.visibility == 'hidden' 
    }
}

现在我一无所获。没有错误，但按钮不起作用。我刚刚学习js，但我不知道问题出在哪里。另外，我真的想尽可能避免使用jQuery或任何其他框架。

整个代码看起来像这样：

<head>
<title>Button Test</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="css.css"/>
<script type="text/javascript">
    function showImage()
    {
        var elems = document.getElementsByClassName('showHide');
        for (var i=0; i<elems.length; i++)
            {
                if (elems[i].style.visibility == 'visible')
                {
                    elems[i].style.visibility == 'hidden' 
                }
                else (elems[i].style.visibility == 'hidden')
                {
                    elems[i].style.visibility == 'visible'
                }
            }
    }
</script>
</head>
<body>
<div id="top">
    <input type="button" value="Pokaż/Ukryj Grafikę" id="showHideButton" onclick="showImage();"/>
</div>
<div id="main">
    <div class="topSide showHide">
        <img src="IMG/1.png"/>
    </div>
    <div class="topSide showHide">
        <img src="IMG/2.jpg"/>
    </div>
    <div class="topSide showHide">
        <img src="IMG/3.jpg"/>
    </div>

所有和任何帮助将不胜感激。

Answer 1

当您使用作业==时，您正在使用比较=，如下所示：

if (elems[i].style.visibility == 'visible')  // comparison
{
    elems[i].style.visibility = 'hidden';    // assignment
}

Answer 2

有些事情是错误的。

您的第二次尝试几乎是正确的，只是分配错误（分配中只有一个=）

var elems = document.getElementsByClassName('showHide');
for (var i=0; i<elems.length; i++){
    if (elems[i].style.visibility == 'visible')
    {
        elems[i].style.visibility = 'hidden';
    }
}

在完整代码中，还有另一个问题......您的else子句看起来像是else if（再次，错误的分配）

else if (elems[i].style.visibility == 'hidden')
{
   elems[i].style.visibility = 'visible';
}

Answer 3

嗯，首先，else条款没有条件。其次，当您要分配值时，您正在使用比较运算符。所以，正确的代码如下：

function showImage()
    {
        var elems = document.getElementsByClassName('showHide');
        for (var i=0; i<elems.length; i++)
            {
                if (elems[i].style.visibility == 'visible')
                {
                    elems[i].style.visibility = 'hidden' 
                }
                else
                {
                    elems[i].style.visibility = 'visible'
                }
            }
    }

重要提示：

还值得注意的是，您的元素在第一次按键点击时没有定义任何可见性，因此elems[i].style.visibility将来自＆＃39;＆＃39; （空字符串）起初。因此，您希望将style="visibility: visible"添加到.showHide类的每个div中，或者更改if子句：

if (elems[i].style.visibility == 'visible')

为：

if (elems[i].style.visibility == 'visible' || elems[i].style.visibility == '')

让你的代码完美无瑕地工作。

Answer 4

确实，其他条款没有条件，而且作业只有单个=符号。此外，可见性初始化为＆＃34;＆＃34;所以你必须包括一张支票。这是更正后的代码：

<html>
<head>
<title>Button Test</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="css.css"/>
<script type="text/javascript">
    function showImage()
    {
        var elems = document.getElementsByClassName('showHide');
        for (var i=0; i<elems.length; i++)
        {
            if (elems[i].style.visibility == 'visible' || elems[i].style.visibility == "")
            {
                elems[i].style.visibility = 'hidden';
            }
            else if(elems[i].style.visibility == 'hidden')
            {
                elems[i].style.visibility = 'visible';
            }
        }
    }
</script>
</head>
<body>
<div id="top">
    <input type="button" value="Pokaż/Ukryj Grafikę" id="showHideButton" onclick="showImage();"/>
</div>
<div id="main">
    <div class="topSide showHide">
        <img src="IMG/1.png"/>
    </div>
    <div class="topSide showHide">
        <img src="IMG/2.jpg"/>
    </div>
    <div class="topSide showHide">
        <img src="IMG/3.jpg"/>
    </div>
</div>
</body>
</html>

在JavaScript

4 个答案: