多个changeImage实例

Question

希望有人能帮助我。我使用的JS图像比较脚本显示两个图像并排显示，用户可以比较它们。它的工作原理是这样的：

<div id="container1"> 
<!-- The before image is first --> 
<img id="img" src=" http://placehold.it/400x200&text=1" /> 
<!-- The after image is last --> 
<img id="img-alt" src="http://placehold.it/400x200&text=2" /> 
</div> 

脚本拉动第一IMG作为左图像，而第二张图片为右图像。我已经添加了两个ID，因为我已经设置了按钮，并且我希望它们在两侧都更换图像，因此两个图像不是静态的，并且可以从缩略图库中选择和比较多个图像（根据用户的选择）。

我在这里发现了一些代码，这会影响左侧的很好。我还添加了一个按钮，可以让左侧改变。

<script type="text/javascript"> 
function changeImage(a) { 
    document.getElementById("img").src=a; 
} 
</script> 

和HTML：

Left side: 
<button onclick='changeImage("http://placehold.it/400x200&text=Left");'>Left</button> 
<button onclick='changeImage("http://placehold.it/400x200&text=Left2");'>Left2</button> 

现在，我想创建另一组按钮，影响了“IMG-ALT”级如图所示的滑块HTML - 这会影响右边。我对Javascript的知识有限，如果我用“document.getElementById（”img-alt“）添加另一个脚本。src = a;”右侧没有任何变化。基本上，我想影响右侧像这样的按钮：

Right side: 
<button onclick='changeImage("http://placehold.it/400x200&text=Right");'>Right</button> 
<button onclick='changeImage("http://placehold.it/400x200&text=Right2");'>Right2</button> 

我怎么能关联这些按钮影响“IMG-ALT” ID（第二图像）？

我希望这是有道理的。请让我知道是否需要澄清任何事情。

谢谢！

Answer 1

我不太清楚，这是你能指望什么，但请看看例子，我做了 - >jsfiddle

changeImage = function(elemId, source) { 
    document.getElementById(elemId).src=source; 
} 

<button onclick='changeImage("img-alt", "http://placehold.it/400x200&text=Right");'>Right</button> 
<button onclick='changeImage("img", "http://placehold.it/400x200&text=Left");'>Left</button>