Javascript 在按钮单击时交换图像答案

【问题标题】：Javascript Swap Images on Button ClickJavascript 在按钮单击时交换图像
【发布时间】：2014-01-12 19:46:44
【问题描述】：

我目前有 4 个按钮，一旦单击它们就会从一个图像切换到另一个图像。我可以让前两个工作，但是一旦我点击第三个和第四个，一旦我点击另一个按钮，图像就不会消失——它们会留在屏幕上。

我在文档头部有当前代码：

function showImg(strShow, strHide) {
  document.getElementById(strShow).style.display = 'block'; 
  document.getElementById(strHide).style.display = 'none'; 
}

<div id="image1">
  <INPUT type="submit" class="myButton1" value="" button 
         onclick="showImg( 'a', 'b', 'c', 'd' )"></button>  
  <img id="a" src="Website Photos/scannedimages/remembranceivy.jpg" width="220" height="116.895" style="display:none" alt="A" /> 
</div>

<div id="image2">
  <INPUT type="submit" class="myButton2" value="" button 
         onclick="showImg( 'b', 'a', 'c', 'd' )"></button>  
  <img id="b" src="Website Photos/scannedimages/remembrancemaple.jpg" width="220" height="116.895" style="display:none" alt="B" /> 
</div>

<div id="image3">
  <INPUT type="submit" class="myButton3" value="" button 
         onclick="showImg( 'c', 'a', 'b', 'd' )"></button>  
  <img id="c" src="Website Photos/scannedimages/remembranceoak.jpg" width="220" height="116.895" style="display:none" alt="C" /> 
</div>

<div id="image4">
  <INPUT type="submit" class="myButton4" value="" button 
         onclick="showImg( 'd', 'a', 'c', 'd')"></button>  
  <img id="d" src="Website Photos/scannedimages/remembrancepine.jpg" width="220" height="116.895" style="display:none" alt="D" /> 
</div>

我完全迷路了。是否需要在 Javascript 中添加某些内容以使第三和第四张图像消失？任何帮助将不胜感激！

【问题讨论】：

为什么input 和button 标签一起运行？为什么要将四个参数传递给一个只需要两个参数的函数？此外，您的最后一个实例列出了元素 d 两次。

标签： javascript html imagebutton

【解决方案1】：

您的函数接受两个参数（strShow, strHide），但您传递的是 4 个参数（'c', 'a', 'b', 'd'）。所以它忽略了最后两个，这就是你的照片没有消失的原因。例如，当您单击图像 3 时，会显示图像 C（第一个参数）而隐藏图像 B（第二个参数）。但如果显示的照片是 D 或 A，它不会隐藏它。

【讨论】：

【解决方案2】：

试试

<div id="image3">
<INPUT type="submit" class="myButton3" value="" button onclick="showImg('c', 'd')"></input>  
<img id="c" src="Website Photos/scannedimages/remembranceoak.jpg" width="220" height="116.895" style="display:none" alt="C" /> 
</div>

<div id="image4">
<INPUT type="submit" class="myButton4" value="" button onclick="showImg('d', 'a')"></input>  
<img id="d" src="Website Photos/scannedimages/remembrancepine.jpg" width="220" height="116.895" style="display:none" alt="D" /> 
</div>

注意showIgm 只接受两个参数。

【讨论】：