基於ALT標籤的鏈接圖片

Question

我有一個WordPress的網站，我需要圖片鏈接到特定的網址。

媒體上傳器中通常的「鏈接到」功能不起作用，因此我正在考慮使用Javascript實現此功能。

通常我會覺得做這樣的：

var image = document.getElementById('mydiv').getElementsByTagName('img')[0]; 
a.appendChild(image); 

但因爲使用的getElementById特定的照片，我得不到的東西，我是根據自己的SRC或ALT標記，想知道是否有辦法找到特定的圖像。

頁中的問題是： Rockaway Fest

Answer 1

試試這個例子。

HTML

<style> 
    img {display: none;} 
    a {display: block;} 
</style> 
<img src="http://dummyimage.com/50x50/000000/ffffff.jpg&text=thisimage" alt="thisimage"> 
<img src="http://dummyimage.com/50x50/000000/ffffff.jpg&text=nothisimage" alt="nothis"> 

<a class="thisimage">This image</a> 
<a class="thisimage">This image</a> 
<a class="thisimage">This image</a> 

JS

<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
var image = document.querySelectorAll(" img[alt*='thisimage'] "); 
//$('.thisimage').each(function (i, v) { 
    $('.thisimage').append(image); 
//}); 
</script> 

OUTPUT

<a class="thisimage">This image<img src="http://dummyimage.com/50x50/000000/ffffff.jpg&amp;text=thisimage" alt="thisimage"></a> 
<a class="thisimage">This image<img src="http://dummyimage.com/50x50/000000/ffffff.jpg&amp;text=thisimage" alt="thisimage"></a> 
<a class="thisimage">This image<img src="http://dummyimage.com/50x50/000000/ffffff.jpg&amp;text=thisimage" alt="thisimage"></a>