jQuery：用A錨點標記包裝圖像標記的最簡單方法

Question

這是我的問題的簡化版本。

我有兩個按鈕和一個圖像。圖像的代碼是這樣的

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

當我按下按鈕，一個我想要的形象被包裝在一個標籤，就像

<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

你可以使用jQuery wrap（）函數。

的代碼是：使用jQuery的click圖像上綁定本身會比錨包裝形象更好

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

但也許：

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

Answer 3

嘗試這樣的事情。

Answer 4

包裹元素

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

而解開

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