Javascript 如何清理这个jQuery悬停+；包裹函数

以下是我的功能：

var add_cloud_zoom_wrapper = function() {
  $('#main-image').hover(function() {
    $('#main-image').wrap(function() {
      return '<a href=' + $(this).attr('src').replace(/\bproduct\b/, 'original') + ' class="cloud-zoom" id="zoom1" rel="adjustX: 10, adjustY:-4, position: \'inside\'">';
    });
  });
}

var add\u cloud\u zoom\u wrapper=function（）{
$（'#主图像'）。悬停（函数（）{
$（“#主图像”）.wrap（函数（）{
返回“”；
});
});
}

.wrap（）单独起作用。但是，每当图像悬停在上面时，我都需要这样做，因为我有另一个事件，图像会发生变化，所以每次我都需要一个新的锚定标记来悬停新嵌入的图像。另一部分是我需要在包装之前删除id=“zoom1”的锚定标记，否则我们将有额外的/损坏的标记。最好的清理方法是什么

我的HTML是直截了当的：

<img alt="foo" id="main-image" src="/assets/products/1051/product/Perspective_View-0.jpeg?1290039436" />

---

我不能100%肯定我理解了你的问题，但这可能有用：

var add_cloud_zoom_wrapper = function() {
    $('#main-image').hover(
    function() {
        $(this).wrap(function() {
            return '<a href=' + $(this).attr('src').replace(/\bproduct\b/, 'original') + ' class="cloud-zoom" id="zoom1" rel="adjustX: 10, adjustY:-4, position: \'inside\'">';
        });
    }, function() {
        var link_element = $(this).closest('a');
        link_element.parent().append($(this));
        link_element.remove();
    });
};

var add\u cloud\u zoom\u wrapper=function（）{
$（“#主图像”）。悬停(
函数（）{
$（this）.wrap（function（）{
return.
似乎无法实现这一点。在示例中，我应该怎么做？你可以看到它在mouseover上添加了指向图像的链接，并在mouseout上删除了它。这是一个蹩脚的问题，但你是否在结果框上进行了mouseover？查看HTML更新的过程是什么？对如何使用该站点感到困惑。实际上，jsfiddle非常酷。t右下角的框是你应该看到的。鼠标移动时，alt文本（因为找不到图像）变为蓝色（即出现链接），鼠标移动时，它被删除。看，我添加了一些内容，这样你可以在文本区域中看到html。