Question

这是我的功能：

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\'">';
    });
  });
}

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

我的HTML很直接：

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

Answer 1

我不是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();
    });
};

您可以看到它正常工作here。

如何清理这个jQuery hover + wrap函数

1 个答案: