如何使我的代码一次显示一张图像？

Question

How would I make my code show one image at time? 如何使我的代码一次显示一张图像？

<!DOCTYPE html>
    <html lang ="en">
    <head>
    <title> VIS</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" >

    function showImage(id){
          if(document.getElementById(id).style.visibility =='visible')
             document.getElementById(id).style.visibility = 'hidden';
           else
              document.getElementById(id).style.visibility= 'visible';
        }
    </script>
    </head>
    <body>


    <div style="position: relative; visibility: visible;"> 
    <img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437"
              alt="Pumpkins" id="Pum"/>
    <button onclick="showImage('Pum');">Pumpkins</button>
    </div>

    <div style="position: relative; visibility: visible;"> 
    <img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437"
              alt="Pumpkins" id="Straw"/>
    <button onclick="showImage('Straw');">Strawberries</button>
    </div>

    <div style="position: relative; visibility: visible;"> 
    <img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437"
              alt="Pumpkins" id="Ras"/>
    <button onclick="showImage('Ras');">Rasberries</button>
    </div>








    </body>

    </html>

My code works fine, but I want it to show one image at time.When I click one of them, it will hide the other . 我的代码工作正常，但是我希望它一次显示一个图像，当我单击其中一个时，它将隐藏另一个图像。

With my code,can show as many images as I want and as few images. 使用我的代码，可以显示任意数量的图像。 How could I do this , could I send multiple ids as parameters ? 我该怎么做，我可以发送多个id作为参数吗？

Any help would be great. 任何帮助都会很棒。

Answer 1

Try like this: 尝试这样：

First get all the images and hide them , if you want any specific to be shown at load time just ignore that index.after loading you can do your button action as you are trying to.If you want to hide the rest of the visible images on button click then just get the visible image and hide it and show the clicked one. 首先获取所有图像并隐藏它们，如果要在加载时显示任何特定内容，则忽略该索引。加载后，您可以尝试执行按钮操作。如果要隐藏其余可见图像在按钮上单击，然后获取可见图像并将其隐藏并显示单击的图像。

  <!DOCTYPE html> <html lang ="en"> <head> <title> VIS</title> <meta charset="utf-8"/> </head> <body> <div style="position: relative; visibility: visible;"> <img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437" alt="Pumpkins" id="Pum"/> <button onclick="showImage('Pum');">Pumpkins</button> </div> <div style="position: relative; visibility: visible;"> <img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437" alt="Pumpkins" id="Straw"/> <button onclick="showImage('Straw');">Strawberries</button> </div> <div style="position: relative; visibility: visible;"> <img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437" alt="Pumpkins" id="Ras"/> <button onclick="showImage('Ras');">Rasberries</button> </div> </body> <script type="text/javascript" > removeVisibility(); function showImage(id){ removeVisibility(); if(document.getElementById(id).style.visibility =='hidden') document.getElementById(id).style.visibility = 'visible'; } function removeVisibility(){ var imgs=document.getElementsByTagName('img');//get all the images for(var i=0;i< imgs.length;i++){ imgs[i].style.visibility= 'hidden'; //hide them } } </script> </html>

如何使我的代码一次显示一张图像？

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-10-18 17:11:21

如何使我的代码一次显示一张图像？

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-10-18 17:11:21

解决方案1
0 已采纳 2015-10-18 17:11:21