Question

我如何让我的代码一次显示一张图片？

<!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>

我的代码工作正常，但我希望它能够显示一个图像。当我点击其中一个时，它会隐藏另一个。

使用我的代码，可以显示尽可能多的图像和少量图像。我怎么能这样做，我可以发送多个id作为参数吗？

任何帮助都会很棒。

Answer 1

试试这样：

首先获取所有图像并隐藏它们，如果你想在加载时显示任何特定的信息，只需忽略该索引。加载后你可以按照你的意图进行按钮动作。如果你想隐藏剩下的按钮上的可见图像点击然后只是获取可见图像并隐藏它并显示点击的图像。

＆＃13;

     <!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>

＆＃13;

我如何让我的代码在一次显示一张图片？

1 个答案: