javascript - 属性更改后重新将 jquery 插件绑定(bind)到选择器？

Question

我为产品页面创建了一个相当简单的画廊。一个产品可以有多个图像，因此我决定在上面放置一个大的特色图像，并在下面显示缩略图。当您单击缩略图时，大特色图像将更新以显示缩略图的更大版本。一切都很好。问题是我想使用一个名为 loupe 的 jQuery 插件，它为特色图像添加了放大功能。它有点有效，但是当我更改特色图像(通过单击缩略图)时，放大镜插件无法识别源更改，并且仍然将上一个图像显示为叠加层。

请参阅此代码笔:http://codepen.io/vobpler/pen/klfEb 编辑: jsFiddle 链接(如果上述情况不起作用):http://jsfiddle.net/c8bXE/

这是我的标记:

<div class="featured">
    <a href="">
        <img src="" alt="">
    </a>
</div>

<div class="thumbnails">
    <a href="">
        <img src="" alt="">
    </a>
    <a href="">
        <img src="" alt="">
    </a>
    <a href="">
        <img src="" alt="">
    </a>
</div>

有没有办法“卸载”放大镜，并在特色图像更改后重新连接它？我尝试在源更改后重新应用它，但这没有任何作用。

Answer 1

查看插件的代码并进行一些检查后，我发现您只需在 fullImg.load() 处理程序的末尾添加以下行:

$('.loupe > img').prop('src', fullSrc);

参见working fiddle