javascript - 我正在使用 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 属性中发生变化时，为什么缩放图像在缩放部分没有改变。

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

Answer 1

如果你有这样一张图片:

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

然后你可以用这个激活缩放功能:

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