jQuery: La manera más fácil de ajustar una etiqueta de imagen con una etiqueta de anclaje A

Question

Esta es una versión simplificada de mi problema.

Tengo dos botones y una imagen. El código de la imagen es algo como esto

<img class="onoff" src="image.jpg"> 

Al pulsar un botón Quiero que la imagen se envuelve en una etiqueta A, como

<a href="link.html"> 
<img class="onoff" src="image.jpg"> 
</a> 

Y al pulsar el otro botón, las etiquetas A debería ser removido.

¿Cuál es la forma más fácil de hacer esto con jQuery?

Answer 1

usted tiene ya muchas respuestas, pero (al menos antes de empezar a escribir) ninguno de ellos va a funcionar correctamente.

No toman en cuenta que usted debe no envolver los <img> con múltiples <a> etiquetas. Además, no ¡intente desenvolverlo si no está envuelto! Destruirías tu DOM.

Este simple código hace una verificación antes de envolver o desenvolver:

$(function(){ 
    var wrapped = false; 
    var original = $(".onoff"); 

    $("#button1").click(function(){ 
     if (!wrapped) { 
      wrapped = true; 
      $(".onoff").wrap("<a href=\"link.html\"></a>"); 
     } 
    }); 

    $("#button2").click(function(){ 
     if (wrapped) { 
      wrapped = false; 
      $(".onoff").parent().replaceWith(original); 
     } 
    }); 
}); 

Buena suerte!

Answer 2

puede usar la función jQuery wrap().

El código es:

<input type="button" id="button1" value="Wrap" /> 
    <input type="button" id="button2" value="Unwrap" /> 
    <img class="onoff" src="image.jpg" alt="" /> 

    $(function() { 
     //wrap 
     $('#button1').click(function() { 
      $('.onoff').wrap('<a href="link.html"></a>'); 
      //if you want to make sure multiple clicks won't add new <a> around it 
      //you could unbind this event like that: 
      //$(this).unbind("click") 
     }); 
     //unwrap 
     $('#button2').click(function() { 
      $('.onoff').parent().each(function() { $(this.childNodes).insertBefore(this); }).remove(); 
      //$(this).unbind("click") 
     }); 
    }); 

Answer 3

intentar algo como esto:

$("img.onoff").wrap(
    $("<a/>").attr("href", "link.html")); 

Pero tal vez usando jQuery click vinculante sobre la propia imagen sería mejor que envolver la imagen de un ancla.

Answer 4

utilizar con el elemento

$(".onoff").wrap("<a href='link.html'></a>"); 

Y para desenvolver

$(".onoff").parent().replaceWith($(".onoff"));