jQuery：用 A 锚标签包装图像标签的最简单方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1767414/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery: Easiest way to wrap an image tag with an A anchor tag
提问by cannyboy
This is a simplified version of my problem.
这是我的问题的简化版本。
I have two buttons, and one image. The image code is something like this
我有两个按钮和一个图像。图像代码是这样的
<img class="onoff" src="image.jpg">
When I press button one I want the image to be wrapped in an A tag, like
当我按下一个按钮时，我希望图像被包裹在一个 A 标签中，比如
<a href="link.html">
<img class="onoff" src="image.jpg">
</a>
And when I press the other button, the A tags should be removed.
当我按下另一个按钮时，应该删除 A 标签。
What's the easiest way of doing this with jQuery?
使用 jQuery 执行此操作的最简单方法是什么？
回答by Bruno Reis
you have already many answers, but (at least before I started writing) none of them will correctly work.
你已经有很多答案了，但是（至少在我开始写作之前）它们都不会正确工作。
They do not take into account that you should notwrap the <img>with multiple <a>tags. Furthermore, do nottry to unwrap it if it is not wrapped! You would destroy your DOM.
他们没有考虑到，你应该不换行<img>与多个<a>标签。此外，如果它没有包装，不要试图打开它！你会破坏你的DOM。
This code simple does a verification before wrapping or unwrapping:
此代码简单在包装或展开之前进行验证：
$(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);
}
});
});
Good luck!
祝你好运！
回答by Simon Fox
To wrap the element
包裹元素
$(".onoff").wrap("<a href='link.html'></a>");
And to unwrap
并解开
$(".onoff").parent().replaceWith($(".onoff"));
回答by Andrew Hare
回答by rochal
you can use jQuery wrap() function.
您可以使用 jQuery wrap() 函数。
The code is:
代码是：
<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" )
});
});
