如何在使用放大镜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 );
}

我使用放大镜 js 的 HTML 代码

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

我调用java脚本来更改图像src的HTML

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

Answer 1

如果你查看放大代码，你会看到这个初始化器：

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

您的放大图像没有得到更新的原因是放大初始化程序已经运行并且没有观察任何src 更改。您可以通过在SwitchPic 中添加手动调用来修复它：

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

这是proof of concept。