我正在使用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');

我的建議是您應該看一下並修改點擊事件。