javascript - 多个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”类的按钮，如 slider 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>