隱藏/顯示圖像按鈕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

回答

相關問題