javascript - 单击按钮更改图像的多个属性

Question

我想通过单击按钮更改图像的两个属性:src 和 data-zoom-image。

请告诉我在下面的 JS onclick 代码中我做错了什么。

src 正在更改，但 data-zoom-image 无法正常工作。

<div class="">
    <img id="zoom_01" src="http://i.imgur.com/Vl2kjp8b.jpg" data-zoom-image="http://i.imgur.com/Vl2kjp8b.jpg" />
</div>

<button onclick="document.getElementById('zoom_01').src='http://i.imgur.com/Vl2kjp8b.jpg';document.getElementById('zoom_01').data-zoom-image='http://i.imgur.com/Vl2kjp8b.jpg'">
    <img id="zoom_01" src="http://i.imgur.com/Vl2kjp8b.jpg" data-zoom-image="http://i.imgur.com/Vl2kjp8b.jpg" />
</button>

<button onclick="document.getElementById('zoom_01').src='http://i.imgur.com/fkR51QDb.jpg';document.getElementById('zoom_01').data-zoom-image='http://i.imgur.com/fkR51QDb.jpg';">
    <img id="zoom_01" src="http://i.imgur.com/fkR51QDb.jpg" data-zoom-image="http://i.imgur.com/fkR51QDb.jpg" />
</button>

Answer 1

您已经有相似的 id，应该是唯一的，您必须使用“setAttribute”属性来修改属性值::

document.getElementById('zoom_01').setAttribute("src", "http://i.imgur.com/Vl2kjp8b.jpg");

document.getElementById('zoom_01').setAttribute("data-zoom-image", "http://i.imgur.com/Vl2kjp8b.jpg");