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

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

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

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

Когда я нажимаю кнопку один, я хочу, чтобы изображение было обернуто в тег A, например

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

И когда я нажимаю другую кнопку, теги A должны быть удалены.

Какой самый простой способ сделать это с помощью jQuery?

Ответ 1

у вас уже много ответов, но (по крайней мере, до того, как я начал писать) ни один из них не будет корректно работать.

Они не учитывают, что вы должны не обернуть <img> тегами multiple <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);
        }
    });
});

Удачи!

Ответ 2

Чтобы обернуть элемент

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

И развернуть

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

Ответ 3

Попробуйте что-то вроде этого:

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

Но, возможно, использование jQuery click привязки к самому изображению было бы лучше, чем обертка изображения в якоре.

Ответ 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" )
        });
    });