Question

我想用图片替换文字链接，但仍然可以点击图片并转到“＆＃39; 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更加舒适。

我的猜测是我没有定位正确的元素（＆＃39;添加收藏夹＆＃39;文字），但还没弄清楚如何。

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>

Fiddle

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

仅替换带有图像链接的链接文本 - Jquery

2 个答案: