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

我不太确定这是你的期望，但请看看我做过的例子 - ＆gt; 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>

多个changeImage实例

1 个答案: