隐藏/显示图像按钮JS

我有一个网页，我有3个图像，我有一个按钮可以一次隐藏这些图像，然后显示它们（此部分尚未实现）。我有一个隐藏它们的JS函数，但它不工作，我不知道为什么。所以这是我的代码的一部分：隐藏/显示图像按钮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>

来源

2014-03-01 echelon

的jsfiddle演示请））将是伟大的！ –

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

你的代码有很多错误。首先，有一个错字“getELementById”（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>

来源

2014-03-01 14:15:24

谢谢你的回答。你是对的，我真的是新的JS，我需要了解更多。 for循环是从某处复制的，我没有注意到这个可怕的错误。无论如何，它的工作，再次感谢你。 – echelon

没问题，祝你好运学习js！ –

使用可以使用diplay没有或阻止CSS财产隐藏和显示任何视图分别

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

通过JavaScript你可以使用这个

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

来源

2014-03-01 14:15:53

对不起，但你的代码有点混乱。如果您每次尝试隐藏每个图像，为什么要使用for语句？

顺便说一下，您滥用for ...在声明中。 AllImages是一个没有数字索引的并列数组。对于（AllImages中的var图像），图像将是'左'，然后'中心'，然后'右'（您正在使用的对象的属性的名称）。因此，像

AllImages[image+1]

一个语句将返回“未定义”，你的代码会抛出一个错误。您的代码应该是这样的：

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

来源

2014-03-01 15:05:18

隐藏/显示图像按钮JS

回答

相关问题