Question

我想更改图片的两个属性：src＆amp;数据缩放图像，单击按钮。

请告诉我，我在做什么错误在JS onclick Code下面。

src正在改变，但数据缩放图像无法正常工作。

<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，它们应该是唯一的，你必须使用＆＃34; setAttribute＆＃34;属性修改属性值::

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");

Answer 2

您可以使用jQuery实现此目的。

在按钮上添加不同的id，点击它们，调用jQuery的attr函数：

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

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

<button id="zoom_02">
    <img class="img_3" src="http://i.imgur.com/fkR51QDb.jpg" data-zoom-image="http://i.imgur.com/fkR51QDb.jpg" />
</button>

jQuery代码

$('#zoom_01').click(function(){
    $(this).find('img').attr('src','http://i.imgur.com/Vl2kjp8b.jpg');

    $(this).find('img').attr('data-zoom-image','http://i.imgur.com/Vl2kjp8b.jpg');
});

$('#zoom_02').click(function(){
    $(this).find('img').attr('src','http://i.imgur.com/fkR51QDb.jpg');

    $(this).find('img').attr('data-zoom-image','http://i.imgur.com/fkR51QDb.jpg');
});

并且不要对多个元素使用相同的ID。如果您希望实现此类功能，请改用same class name。

Answer 3

我认为您想在两张图片之间切换？

您只需要一个包含一张图片的按钮。

然后你在javascript中编写一个函数，它会改变你的两个属性。

在按钮上更改图像的多个属性单击

3 个答案: