多个 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 作为左图，第二个 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>