如何清理此jQuery hover + wrap函数

Question

Here's my function:

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

The .wrap() alone works. I need this to work however, whenever the image is hovered over because I have another event where the image changes, so I'll need a new anchor tag to hover the newly embedded image each time. The other part of this is I need to remove the anchor tag with id="zoom1" before I wrap, otherwise we'll have additional/broken markup. What's the best way to clean this up?

My HTML is straight forward:

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

Answer 1

I'm not 100% sure I understood your question, but this may work:

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

You can see it working here .