用圖像鏈接僅替換鏈接的文本-Jquery

Question

我想用圖像替換文本鏈接，但仍然能夠單擊該圖像並將其定向到“ a”標簽中的鏈接。

原始HTML如下所示：

  <div class="col-md-1 hidden_grid">

   <ul>
    <li>
     <span class="wlt_shortcode_favs">
      <a onclick="WLTAddF('revistamovil.com.mx', 'favorite', 19, 'core_ajax_callback');" href="javascript:void(0);" class="list_favorites_add ">
       <span>Add Favorites</span>
      </a>
     </span>
    </li>
    <li>
      <a class="detbtn" href="http://revistamovil.com.mx/directorio/example-listing-9/">More Info</a>
    </li>
   </ul>

  </div>

我正在使用的Jquery確實用圖像替換了Text，但是當我單擊圖像時，它也刪除了要保留在HTML中的鏈接。 看起來像這樣：

<script>
// To change the favorites text for an image

   jQuery(document).ready(function($){
      $( ".wlt_shortcode_favs:contains('Add Favorites')" ).html("<span><img src='http://revistamovil.com.mx/wp-content/uploads/2016/05/favoritos.png'></span>");
  });
</script> 

注意：這是一個wordpress網站，因此可能有一種方法可以更輕松地使用php進行此操作，但是我使用Jquery感到更加舒適。

我的猜測是我沒有針對正確的元素（“添加收藏夾”文本），但是還沒有弄清楚該怎么做。

Answer 1

<script>
// To change the favorites text for an image

   jQuery(document).ready(function($){
      $( ".list_favorites_add" ).html("<span><img src='http://revistamovil.com.mx/wp-content/uploads/2016/05/favoritos.png'></span>");
  });
</script> 

小提琴

Answer 2

您非常接近，但是：contains方法如此選擇所有元素，這也選擇一個標簽並替換掉，您更具體可以嘗試下面的代碼。

jQuery(document).ready(function($){
      $( ".wlt_shortcode_favs span:contains('Add Favorites')" ).html("<img src='http://revistamovil.com.mx/wp-content/uploads/2016/05/favoritos.png'>"); 
});