Question

我有一个网页，其中我有3张图片，我有一个按钮可以在点击时一次隐藏这些图像，然后显示它们（此部分尚未实现）。我有一个用于隐藏它们的JS函数，但它不起作用，我不知道为什么。所以这是我的代码的一部分：

<div id="left"><img id="leftimage" name="leftimage" src="pic1url.jpg" style=
"visibility:visible"></div>

<div id="centerright">
    <div id="center"><img id="centerimage" name="centerimage" src="pic2url.jpg"
    style="visibility:visible"></div>

    <div id="right"><img id="rightimage" name="rightimage" src="pic2url.jpg"
    style="visibility:visible"></div>
</div><script type="text/javascript">
     var hideShowButton = document.getELementById("hideShowButton");
        hideShowButton.onclick = function()
        { 
            var allImages = { left:"leftimage"; center:"centerimage"; right:"rightimage"};
            if(document.getElementById("leftimage").style.visibility == 'visible')
            {
                for ( var image in allImages)
                { document.getElementById(allImages[image]).style.visibility = 'hidden';
                  document.getElementById(allImages[image+"1"]).style.visibility = 'hidden';
                                   document.getElementById(allImages[image+"2"]).style.visibility = 'hidden'; 
                }
        document.getElementById("hideShowButton").innerHTML = "Mostrar imagens";
            }
        }
</script>

<div id="buttons">
    <input id="hideShowButton" type="button" value="Hide Pics">
</div>

Answer 1

在阅读答案之前，我强烈建议您学习如何使用浏览器的控制台。它将打印使您的JavaScript代码崩溃的所有错误。我还建议您花一些时间阅读JavaScript教程：）

您的代码有很多问题。首先，有一个拼写错误＆＃34; getELementById＆＃34; （L是大写而不是小写）。其次，您需要在按钮旁边放置脚本标记。第三，在创建对象时，您应该使用逗号（，）而不是分号（;）来分隔它的属性。最后，你错误地使用了for循环。只是为了帮助你，这里是纠正的代码，但不要指望人们每次都为你做这件事。你需要在将来自己发现这些错误：）

<div id="left"> 
    <img src="pic1url.jpg" id="leftimage" style="visibility:visible" />
</div>

<div id="centerright">
    <div id="center">

        <img src="pic2url.jpg" id="centerimage" style="visibility:visible"/>
    </div>
    <div id="right">

        <img src="pic2url.jpg" id="rightimage" style="visibility:visible"/>
    </div>
</div>

<div id="buttons">
    <input type="button" value="Hide Pics" id="hideShowButton" />
</div>
<script  type="text/javascript">

    var hideShowButton = document.getElementById("hideShowButton");

    hideShowButton.onclick = function()
    { 
        var allImages = { left:"leftimage", center:"centerimage", right:"rightimage"};

        if(document.getElementById("leftimage").style.visibility == 'visible')
        {
            for ( var image in allImages)
            {
                document.getElementById(allImages[image]).style.visibility = 'hidden'; 
            }
            document.getElementById("hideShowButton").innerHTML = "Mostrar imagens";
        }
    }
</script>

Answer 2

使用可以使用display none或css属性分别隐藏和显示任何视图

<img id="one" src="pic1url.jpg" style="display:none;" />

通过javascript你可以使用这个

document.getElementById(one).style.display = 'none';

Answer 3

抱歉，您的代码有点乱。如果你每次都试图隐藏每个图像，为什么还要使用for语句？

顺便说一句，你是在滥用for ... in语句。 AllImages是一个没有数字索引的asociative数组。对于（AllImages中的var图像），图像将为“左”，然后是“中心”，然后是“右”（您正在使用的对象属性的名称）。所以像

这样的陈述

AllImages[image+1]

将返回'undefined'，您的代码将抛出错误。您的代码应如下所示：

hideShowButton.onclick = function()
    { 
        var allImages = { left:"leftimage"; center:"centerimage"; right:"rightimage"};
        if(document.getElementById("leftimage").style.visibility == 'visible')
        {
            for ( var image in allImages)
            { 
                document.getElementById(allImages[image]).style.visibility = 'hidden';
            }
            document.getElementById("hideShowButton").innerHTML = "Mostrar imagens";
        }
    }

顺便提一下，我建议你阅读一些关于javascript循环的文档，比如MDN

隐藏/显示图像按钮JS

3 个答案: