jQuery：用A锚点标记包装图像标记的最简单方法

Question

这是我的问题的简化版本。

我有两个按钮和一个图像。图像的代码是这样的

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

当我按下按钮，一个我想要的形象被包装在一个标签，就像

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

当我按下另一个按钮，在A标签应该被删除。

用jQuery做这件事最简单的方法是什么？

Answer 1

你已经有很多答案，但（至少在我开始写作）他们都将正常工作。

他们没有考虑到，你应该不包裹<img>与多个<a>标签。此外，不要如果它未被包装，尝试解开它！你会毁掉你的DOM。

此代码简单做了验证包装或展开前：

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

祝你好运！

Answer 2

你可以使用jQuery wrap（）函数。

的代码是：使用jQuery的click图像上绑定本身会比锚包装形象更好

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

但也许：

<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

尝试这样的事情。

Answer 4

包裹元素

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

而解开

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