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

Question

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

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

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

当我按下按钮时,我希望将图像包裹在A标签中,例如

<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

包装元素

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

打开包装

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

Answer 3

尝试这样的事情：

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

但是也许click在图像本身上使用jQuery的绑定会比将图像包装在锚点中更好。