我正在使用jQuery中的onclick函数更改data- *属性的值。 属性值更改但不起作用

Question

我的问题在下面的链接http://www.cannonfoam.com/prdetail?id=212中 。 这是一个产品页面。 产品具有一张入门图片和两张次级图片。 以下链接提供了我用于悬停时图像缩放的图书馆的详细信息和过程。 http://www.elevateweb.co.uk/image-zoom 。 该图书馆使用src属性显示小图像，然后data-zoom-image属性具有要显示为缩放图像的图像路径。

现在，问题是我被要求在单击次映像时应将主映像替换为次映像。 我创建了一个替换src属性值和data-zoom-image属性值的函数。 图像更改成功，当我检查元素时，我可以看到data-zoom-image属性也发生了变化。 但在缩放的图像中，只有主图像可见。

我无法低估，当data-zoom-image属性中的图像路径发生变化时，为什么在zoom部分中没有缩放图像。

请有人帮助我解决这个问题..我的客户对我发火..等待正确的解决方案..

Answer 1

如果您有这样的图像：

<img id="zoom_01" src="small/image1.png" data-zoom-image="large/image1.jpg"/>

然后，您可以使用以下方法激活缩放功能：

$("#zoom_01").elevateZoom();

Answer 2

网站上有一个例子。

这是一个提示。

var ez = $('#zoom_01').data('elevateZoom');
ez.swaptheimage('http://www.cannonfoam.com/assets/images/product/True Restb.jpg', 'http://www.cannonfoam.com/assets/images/product/True Restb.jpg');

我的建议是您应该看一下并修改点击事件。