基於鏈接定義函數

Question

我想爲我的頁面上的每種現有類型的鏈接打開一個函數。

示例：

當我點擊一個.pdf鏈接時，它打開並顯示pdf函數。 如果點擊.mp3鏈接打開播放器等

但我想要一種方式來做到這一點，而無需編輯鏈接。

Answer 1

使用jQuery，您可以輕鬆地將處理程序附加到頁面的所有鏈接。在該處理程序中，您可以測試href並採取適當的措施。如果你想防止某些類型的鏈路的缺省鏈接導航就叫event.preventDefault()這些類型：

$(document).on("click","a", function(e) { 
    if (/\.pdf$/i.test(this.href)) { 
     pdfFunction(); 
    } else if (/\.mp3$/i.test(this.href)) { 
     playMP3(this.href); 
     e.preventDefault(); 
    } // etc. 
}); 

我已經展示了該代碼使用委派事件模型，這樣一個處理程序在文檔級連接，而比每個鏈接附加一個處理程序。如果因爲某種原因每個鏈接需要一個處理程序，則可以執行$("a").on("click",...)或$("a").click(...)。

Answer 2

所以，這真的取決於你想要做什麼。但是，這裏是我的基本建議...

假設你來自一個網頁（假設這是你的意思是鏈接），你必須有一種方法來觸發它是什麼類型的鏈接。很簡單，你可以添加一個類到你的不同類型的鏈接，以確定它們是什麼。您的HTML看起來應該是這樣的：

<a href="http://path/to/file.mp3" class="mp3link">Some Song</a> 
<a href="http://path/to/file.pdf" class="pdflink">Some PDF</a> 
<a href="http://path/to/file2.pdf" class="pdflink">Some Other PDF</a> 

現在，您要觸發鏈接的類型。實際上，如何處理髮生的事情取決於您是否可以在客戶端完成所有操作，或者是否需要返回服務器以進行更多工作（同樣，您必須決定要執行的操作）。您可以使用JavaScript（特別是jQuery庫）在這些類上觸發。像...

$('.mp3link').on('click', function(e) { 
    e.preventDefault(); // stop the link from being clicked 

    // Define what you want to do here - ajax call back to the server or fire 
    // up a client-side media player, or whatever. 
}); 

$('.pdflink').on('click', function(e) { 
    e.preventDefault(); // stop the link from being clicked 

    // Define what you want to do here. 
}); 

...等等，無論你有什麼類型的交互和文件。現在，沒有更多的信息，我無法詳細瞭解，但如果您瞭解應用程序中的客戶端/服務器交互，這應該給您一個完全連接它的良好起點。