이 jQuery를 호버 + 랩 기능

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"인 앵커 태그를 제거해야합니다. 그렇지 않으면 추가/깨진 마크 업이 생깁니다. 이걸 정리하는 가장 좋은 방법은 뭔가? 나는 당신의 질문을 이해

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

Answer 1

아니에요 100 % 확실하지만,이 작동 할 수 :

내 HTML은 정직

이

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 작업 볼 수 있습니다.