如何在使用放大鏡js時更改src時刷新img src？

Question

我正在使用圖像放大鏡http://asp-net-by-parijat.blogspot.in/2014/09/jquery-zoom-image-on-mouseover-in.html來放大圖像。 它工作正常，但我正在使用 java 腳本來更改圖像的 src 但放大不會在懸停時刷新它仍然顯示舊圖像但圖像已更改。 我改變圖像的腳本：

function SwitchPic(a) {
    $("#img").attr("src", a );
    $("#example4").attr("href", a );
}

我使用 Magnifier js 的 HTML 代碼

<img data-toggle="magnify" id="img" style="width:288px;" alt="example4" src="~/Images/Product/abc.jpg" />

我在 HTML 中調用 java 腳本來更改圖像 src

<a onclick='SwitchPic("/Images/Products/xyz.jpg")'>
    <img class="thumbnail" style="width: 128px; display:inline-block;" src="~/Images/Products/xyz.jpg" />
</a>

Answer 1

如果您查看 Magnify 代碼，您會看到這個初始值設定項：

$('[data-toggle="magnify"]').each(function () {
    var $mag = $(this);
    $mag.magnify()
})

您的放大圖像未更新的原因是 Magnify 初始值設定項已經運行並且沒有監視任何src更改。 您可以通過在SwitchPic添加手動調用來修復它：

function SwitchPic(a) {
  img = $("#img")
  img.attr("src", a );
  img.magnify()
}

這是概念證明。