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

前端之家收集整理的这篇文章主要介绍了jQuery:用A锚标签包装图像标签的最简单的方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
这是我的问题的简化版本。

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

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

当我按下按钮1时,我想要将图像包裹在A标签中,像

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

当我按另一个按钮时,应该删除A标签

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

解决方法

你已经有很多答案,但是(至少在我开始写作之前),他们都不会正常工作。

他们没有考虑到你不应该包装< 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);
        }
    });
});

祝你好运!

原文链接:https://www.f2er.com/jquery/182185.html

猜你在找的jQuery相关文章