使用JavaScript切換圖片顯示

Question

此代碼應顯示2個按鈕Map ＆ Rainfall 。
在其上方應是文本"Choose a display" 。
單擊任一按鈕后，它將顯示google地圖圖像（如果單擊地圖按鈕）或降雨圖像（如果單擊降雨按鈕）。

我遇到的問題是，如果我先單擊“地圖”按鈕，將文本替換為地圖，這很好，但是如果我單擊“降雨”按鈕，則圖像不會替換地圖，而是顯示在其下方。

另外，如果我在地圖按鈕之前單擊降雨按鈕並顯示文本，則當我也希望在單擊該按鈕后將其隱藏時，該圖像將顯示在文本"Choose a display" 。

任何幫助將不勝感激。

HTML：

<p align="center"style="font-family:verdana;"id="googlemap">Choose a Main Display</p>
<p align="center"id="bommap"></p>

<p align="center">
    <button type="button" onclick="mapFunction()">Map</button>
    <button type="button" onclick="rainFunction()">Rainfall</button>
</p>

JavaScript：

function mapFunction() {
    x = document.getElementById("googlemap"); // Find the element
    x.innerHTML = '<iframe width="640" height="480" frameborder="0"scrolling="no" marginheight="0" marginwidth="0" src="https://www.google.com.au/maps?f=d&amp;source=s_d&amp;saddr=23+Burgundy+St,+Carseldine+QLD&amp;daddr=90+Gilbert+Rd,+Grange+QLD+to:Narrowneck+Court+Surfers+Paradise,+204+Ferny+Ave,+Surfers+Paradise+QLD&amp;hl=en&amp;geocode=FfOeXv4d6qweCSn9XcBQSP2TazGVQ_0hH3aSYA%3BFRKQXf4d5_QeCSlRy4j_0lmRazEdtrkd8CRD0Q%3BFWXtVP4dWCUlCSGK90q-pKXOZCmv-18SewWRazGK90q-pKXOZA&amp;aq=0&amp;oq=Narr&amp;sll=-27.422699,153.02411&amp;sspn=0.004819,0.008272&amp;t=h&amp;mra=ls&amp;ie=UTF8&amp;ll=-27.555764,153.208466&amp;spn=0.584401,0.878906&amp;z=10&amp;output=embed"></iframe>' // Change the content
}

function rainFunction() {
    x = document.getElementById("bommap"); // Find the Element
    x.innerHTML = '<img src="http://www.bom.gov.au/radar/IDR663.gif?20130517070843" border="0" alt="128 km Brisbane (Mt Stapylton) Radar" title="128 km Brisbane (Mt Stapylton) Radar">'
}

Answer 1

我對您的代碼進行了一些修改，以：創建一個新的<p>標記，其中包含要顯示/隱藏的文本。 要顯示地圖時，需要清除其他<p> 。

  <p id='titleMap'>    Choose a Main Display</p>
    <p align="center"style="font-family:verdana;"id="googlemap">
    </p>
    <p align="center"id="bommap"></p>

    <script>

    function mapFunction()
    {
    document.getElementById("bommap").innerHTML = "";
    document.getElementById("titleMap").innerHTMl = "";
    x=document.getElementById("googlemap");  // Find the element
    x.innerHTML='<iframe ...></iframe>'    // Change the content
    }

    function rainFunction()
    {
    document.getElementById("googlemap").innerHTML = "";
    document.getElementById("titleMap").innerHTMl = "";
    x=document.getElementById("bommap");    // Find the Element
    x.innerHTML='<img src="http://www.bom.gov.au/radar/IDR663.gif?20130517070843" border="0"     alt="128 km Brisbane (Mt Stapylton) Radar" title="128 km Brisbane (Mt Stapylton) Radar">'
    }
    </script>

Answer 2

您為rainmap和google地圖分別設置了一個p ，因此當您的函數運行並通過更改它們的innerHTML顯示內容時，兩個地圖都將顯示。 為了使您的示例正常工作，您必須執行以下操作

function rainFunction()
{
  var x=document.getElementById("bommap");    // Find the Element
  var x.innerHTML='<img src="http://www.bom.etc.etc.' //Change the content
  document.getElementById("googlemap").innerHTML = ''; //Empty the googlemap content;
}

現在，當函數運行時，它將清空（刪除）另一個P元素的內容。 您還需要將此邏輯應用於其他功能才能正常工作。 您還應該使用var關鍵字聲明局部變量。

您可以將其組合為一個類似這樣的功能。

function changeImages(ele){

   var x = document.getElementById("bommap");
   var y = document.getElementById("googlemap");
   var z = document.getElementById("weather"); // ID of the new weather p element

   if(ele === y.id){ //if the value we passed into the function is the same as the p id  
      x.innerHTML = ''; //Empty rainforest image
      z.innerHTML = ''; //Empty the weather image
      y.innerHTML = '<iframe width="640" height="480" etc' //Set googlemap content
   } else if(ele === x.id) {
      y.innerHTML = '';  //Empty googleMap
      z.innerHTML = ''   //Empty weather
      x.innerHTML = '<img src="http://www.bom.gov.au/radar/ etc' //Set bommap content
   } else {
      y.innerHTML = '' //Empty googleMap
      x.innerHTML = '' //Empty bommap
      z.innerHTML = 'contenct for weather here' //Set weather content
   }
}

然后從任一按鈕調用此功能

<button type="button" onclick="changeImages('googlemap')">Map</button>
<button type="button" onclick="changeImages('bommap')">Rainfall</button>
<button type="button" onclick="changeImages('weather')">Weather</button>

顯示/隱藏圖像/元素比動態設置它們的內容可能更有效。 請谷歌顯示/隱藏與JavaScript。 基本思想是設置所有圖像/ iframe，然后使用css style="display:none;"隱藏該元素style="display:none;" 然后，您可以在單擊按鈕時顯示或隱藏相關圖像。