使用jQuery檢查鏈接擴展

我正在嘗試閱讀頁面上的所有鏈接，並檢查鏈接擴展名是否以'.png'結尾。如果確實如此，那麼點擊該鏈接時，我想抓取該圖像並將其添加到類「test」中的div中。如果鏈接不以'.png'結尾，則忽略它並正常打開。使用jQuery檢查鏈接擴展

這是標記，你可以抓住它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>

謝謝！

來源

2011-07-18 Klikerko

這裏是貼的例子，錯誤的完整和相當優雅的（恕我直言）組合和其他的東西固定

$('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

接下來，我們需要一個測試，看看圖像是否已經存在...

來源

2011-07-18 17:54:12 mplungjan

感謝mplungjan，我選擇了你的答案作爲接受的解決方案，但我不得不說，@ShankarSangoli是第一個完整的解決方案。 – Klikerko

我決定合併，因爲其中一個更優雅。例如src：this.href而不是字符串連接 - 現在每個人都已經編輯了他們的解決方案，所以他們都比以前更相似 – mplungjan

試試這個

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

來源

2011-07-18 17:40:21 ShankarSangoli

+1，但爲什麼你是博因爲你已經調用了'preventDefault（）'，所以返回'false'？ –

這不是必需的，但是當我想要阻止默認行爲時，我總是返回false作爲錨點擊。 – ShankarSangoli

這很好，但'preventDefault（）'已經做到了。但是，從jQuery處理程序中返回'false'也會阻止事件冒泡容器鏈，這可能並不總是你想要的:) –

使用jQuery檢查鏈接擴展

回答

相關問題