Question

我正在尝试阅读页面上的所有链接，并检查链接扩展名是否以“.png”结尾。如果是，那么当点击该链接时，我想抓住该图像并使用类'test'追加到div中。如果链接不以'.png'结尾，则忽略它并正常打开。

这是标记，你也可以在jsFiddle抓住它：

<a href="image01.png">Image 01</a>
<a href="image02.png">Image 02</a>
<a href="http://www.google.com/">Page</a>
<a href="image03.png">Image 03</a>

<div class="test"></div>

...这就是单击第一个链接时标记的样子：

<a href="image01.png">Image 01</a>
<a href="image02.png">Image 02</a>
<a href="http://www.google.com/">Page</a>
<a href="image03.png">Image 03</a>

<div class="test">
  <img src="image01.png" />
</div>

谢谢！

Answer 1

试试这个

$("a[href$='.png']").click(function(e){
   e.preventDefault();
   $(".test").append("<img src='"+this.href+"' />");
});

Answer 2

以下是已发布的示例，错误和其他修复内容的完整且非常优雅（imho）的组合

$('a[href$=".png"]').click(function(e) { // nice one ChristopheCVB
    $('.test').append($("<img>", {src: this.href})); // neater than "<img src='"+...+">"
    e.preventDefault(); // should be enough
});

Demo here

接下来我们需要一个测试，看看图像是否已经存在......

使用jQuery检查链接扩展名

2 个答案: