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

Question

这是我的问题的简化版。

我有两个按钮和一张图片。图片的代码大致如下：

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

当我点击按钮一时，我希望图像被包裹在一个A标签中，如下所示

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

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

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

- cannyboy

Answer 1

虽然您已经得到了许多答案，但在我开始撰写本回答之前，它们中没有一个能正常工作。

它们没有考虑到您不应该使用多个<a>标签来包装<img>。另外，如果未被包装，请不要尝试取消包装！这会破坏您的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);
        }
    });
});

祝你好运！

- Bruno Reis

Answer 2

将元素包装起来

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

并且需要进行解包

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

- Simon Fox

---

很棒的replaceWith使用，Simon。谢谢！ - btelles

Answer 3

尝试像这样：

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

也许直接使用jQuery的click绑定在图片上会比将图片包装在一个锚点中更好。

- Andrew Hare

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

- Piotr Rochala

---

多次点击button1 ==> 在img周围添加多个a！ - Bruno Reis

公平的观点，但我在需求中没有看到任何禁止这样做的条款。也许他确实想添加多个链接？无论如何，我已编辑了我的代码并添加了取消单击事件的选项。 - Piotr Rochala

有一个新的潜在问题：取消注释两个解绑函数，然后点击 button1，再点击 button2 ==> 就没有办法再次插入 <a> 标签了。 - Bruno Reis

但是实现的方式超出了此任务的范围。重要的是wrap和Unwrap函数，他想如何使用它-这不是我们的问题。如果他不想使用两次怎么办？我们不知道，所以我认为我们应该专注于任务。 - Piotr Rochala

我认为我们不应该严格限制自己只看到直接的东西。我们应该尽力做到最好，特别是如果这很简单并且几乎不需要时间。因此，如果他不想使用它，通过向他展示如何做到这一点，他至少会在以后的某一天学到它--而且同样的技术他可能想要应用在其他地方。此外，可能会有一些具有类似问题但具有一些额外要求的人，由于SO是这些问题的参考网站，因此围绕其进行推广将是有趣的。你不同意吗？ - Bruno Reis