Question

此代码应显示2个按钮Map＆amp; Rainfall。
上面应该是文字"Choose a display" 单击任一按钮后，它将显示谷歌地图图像（如果单击地图按钮）或降雨图像（如果点击降雨按钮）。

我遇到的问题是，如果我先点击地图按钮，文本会换成地图，这很棒，但是如果我点击降雨按钮，图片就不会取代地图，只是在它下面显示。

此外，如果我在显示文本的地图按钮之前单击降雨按钮，那么当我单击该按钮后我想要隐藏图像时，图像会显示在文本"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 google show / hide。基本的想法是设置所有图像/ iframe，然后用css style="display:none;"隐藏该元素，然后在单击按钮时可以显示或隐藏相关图像。

使用JavaScript切换图像显示

2 个答案: