如何用图像替换链接文字

Question

如何用图像替换链接文字？

我已经尝试过这个剧本：

$(document).ready(function() { 
    $('a:contains("edit")').html('<img src="edit.png"/>'); 
}); 

，但没有任何运气。 我在这里做错了什么？

HTML

<a href="/ideas/bpul_dishes/edit">Edit</a> 

Answer 1

如果我理解正确的话，这是你想要的。 “编辑”需要在href中，而不是在a -tag中包含的文本中，对吗？

http://jsfiddle.net/BramVanroy/t98d7/2/

$(document).ready(function() { 
    $('a[href*="edit"]').html('<img src="edit.png"/>'); 
}); 

如果你的意思是，作为评论表明，该编辑具有对a - 标签内发生，那么下面的解决方案会奏效。如果有必要，我允许以大写字母开头。

http://jsfiddle.net/BramVanroy/t98d7/4/

$(document).ready(function() { 
    $('a:contains("Edit"), a:contains("edit")').html('<img src="edit.png"/>'); 
}); 

或者使用正则表达式（i是改性剂，使所述正则表达式是不区分大小写）。

http://jsfiddle.net/BramVanroy/t98d7/25/

$(document).ready(function() { 
    $("a").filter(function() { 
     return /edit/i.test($(this).text()); 
    }).html('<img src="edit.png"/>'); 
});