Question

我目前有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中添加某些内容以使第三和第四张图像消失？任何帮助将不胜感激！

Answer 1

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

Answer 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只需要两个参数。

按钮上的Javascript交换图像单击

2 个答案: