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

但也许在图像上使用jQuery的click绑定比将图像包装在锚中要好。

Answer 4

你可以使用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" )
        });
    });

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

4 个答案: