jQuery: самый простой способ обернуть тег изображения якорным тегом

Question

Это упрощенная версия моей проблемы.

У меня есть две кнопки и одно изображение. Код изображения выглядит примерно так

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

Когда я нажимаю кнопку 1, я хочу, чтобы изображение было обернуто в тег 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's 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" )
        });
    });