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

这是我问题的简化版本

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

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

当我按下按钮1时，我希望图像被包装在一个标签中，比如

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

当我按下另一个按钮时，A标签应该被移除

使用jQuery最简单的方法是什么？

您可以使用jQuery wrap（）函数

代码是：

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

$（函数（）{
//包裹
$（'#按钮1'）。单击（函数（）{
$（'.onoff'）.wrap（''）；
//如果您想确保多次单击不会在其周围添加新内容
//您可以这样解除此事件的绑定：
//$（此）。解除绑定（“单击”）
});
//打开
$（'#按钮2'）。单击（函数（）{
$（'.onoff'）.parent（）.each（function（）{$（this.childNodes）.insertBefore（this）；}.remove（）；
//$（此）。解除绑定（“单击”）
});
});  

尝试以下方法：

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

$（“img.onoff”）.wrap(
$（“在图像本身上绑定要比在锚点中包装图像好。
要包装元素

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

你已经有很多答案了，但是（至少在我开始写作之前）没有一个正确的答案

它们没有考虑到您不应该用多个
”包装
；
}
});
$（“#按钮2”）。单击（函数（）{
如果（已包装）{
包装=假；
$（“.onoff”）.parent（）替换为（原件）；
}
});
});

祝你好运
 很酷地使用replaceWith，西蒙。谢谢多次点击按钮1==>img周围有多个a！说得对，但我在要求中没有看到任何一项说这是不允许的。也许他真的想添加多个链接？但是，我已经编辑了我的代码，并添加了“单击时解除绑定事件”的选项。这是一个新的潜在问题：取消对两个解除绑定的注释，然后单击
按钮1
，然后单击
按钮2
==>无法再次插入
标记。但实现方式超出了此任务的范围。这里重要的是
wrap
和“Unwrap”函数，他想如何使用它-这不是我们的问题。如果他不想用它两次呢？我们不知道这一点，所以我认为我们应该专注于这项任务。我认为我们不应该把自己严格限制在我们能直接看到的东西上。我们应该尽我们所能做到最好，如果这是如此简单，几乎不花时间，那就更是如此。因此，如果他不想使用它，通过向他展示如何使用它，他至少会在以后的某一天学会它——以及他可能想在其他地方应用的相同技术。此外，可能有人有类似的问题，但有一些额外的要求，因为SO是此类问题的一种参考网站，因此有兴趣进行推断。你不同意吗？
$(".onoff").parent().replaceWith($(".onoff"));

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