2013-03-23 109 views
0

我有幾個鏈接,每個鏈接都有唯一的ID。我想調用一個單一的功能,當任何鏈接被點擊時,用戶會得到一個警告,說明鏈接ID。我很難過。這是我的。我想用純JavaScript來做到這一點。提醒用戶點擊鏈接的ID

我的代碼:

<p><a href="#" id="link0">Link0</a></p> 
<p><a href="#" id="link1">Link1</a></p> 
<p><a href="#" id="link2">Link2</a></p> 
<p><a href="#" id="link3">Link3</a></p> 

<script> 
function test(i) { 
    alert("You just clicked on link:" + i); 
} 

onclick = function() { 
    test(i); 
}; 
</script> 
+0

您添加了代碼得到是從工作JavaScript非常非常長的路。 'onclick'不是一個函數,並且不會像你編寫它的方式那樣工作。這裏的一些答案會有所幫助,但我建議找一些好的教程來學習,因爲儘管複製+粘貼下面的答案可能會讓你的代碼工作,但它不會幫助你理解它的實際工作方式。 – Spudley 2013-03-23 20:39:54

+0

您是否希望網頁上的每個鏈接即使沒有ID,或僅與ID鏈接,或者只有以「鏈接」開頭的鏈接的鏈接,或者只有位於特定類型標籤(例如一個帶有「alertlinks」類的標籤或一個「p」標籤? – 2013-03-23 21:10:40

回答

1

試試這個

var links = document.getElementsByTagName("a"); 

for (var i = 0; i < links.length; i++) { 
    links[i].addEventListener("click", function(e) { 
     e.preventDefault(); 
     alert(this.id); 
    }, false); 
} 

DEMO

+0

該代碼會對頁面的其他部分產生負面影響,例如,Home將不會發出警告,也不會到達目的地。 – 2013-03-23 20:59:50

1

我剛剛創建了一個例子,你使用jQuery的。

$(document).ready(function() { 
    $("a").click(function() { 
     alert(this.id); 
    }); 
}); 

http://jsfiddle.net/Yynw9/

使用jQuery,你必須包括在你的頭庫:

<script src="//code.jquery.com/jquery-1.9.1.js" type="text/javascript" /> 
+0

沒有jQuery - 閱讀要求*我想用純JavaScript做這個* – 2013-03-23 20:33:46

+0

jQuery是純javascript;) – McPepper 2013-03-23 20:35:26

+1

這個問題沒有指定jquery,這通常意味着我們不應該用jQuery解決方案來回答。然而,在這種情況下,問題中所表達的理解水平表明jquery可能是最合適的答案。但是,再次,考慮到我們在問題中可以看到的內容,我會建議編輯答案,以包含關於如何使用jQuery以及如何將其添加到網站的說明,而不僅僅是提供jQuery代碼,因爲如果他試圖測試不知道,它不會工作。 – Spudley 2013-03-23 20:36:28

0

這裏的JavaScript的你正在尋找:

var elements = document.getElementsByTagName("a"); 
for(var i = 0, length = elements.length; i < length; i++) { 
    elements[i].addEventListener("click", function(e) { 
     e.preventDefault(); 
     alert("You just clicked on link: " + this.id); 
    }, false); 
} 

的jsfiddle:http://jsfiddle.net/3R4FA/1/

代碼循環首先選擇所有元素是<a>標籤。然後它循環遍歷這個數組,併爲每個項目添加一個click事件監聽器。使用關鍵字this訪問觸發事件的元素,然後您可以獲取該ID。

+0

我使用相同的確切答案複製了另一篇文章:「該代碼會對頁面的其他部分產生負面影響,例如,Home將不會提醒任何人,也不會到達目的地。」 – 2013-03-23 21:02:11

+0

是的,這很明顯,但海報要求爲每個鏈接執行此操作。如果您不想停止默認行爲,您可以刪除e.preventDefault(),或者您可以提供另一個標識符來附加。事實上,沒有其他標識符可以附加事件。 – CodePB 2013-03-23 21:04:15

+0

所有人都有一個以'鑰匙'開頭的ID,問題在所有ID中都有「鏈接」。你想警告一個沒有任何ID的鏈接? – 2013-03-23 21:09:56

0

在支持它的瀏覽器中,您可以使用querySelectorAll來獲取以'link'開頭的所有id,或者您可以在傳統瀏覽器中添加一個類並使用getElementsByClassName ..解決方案並不乾淨,但是您可以抓住所有的文件或裏面的元素的「一個」標籤,並檢查「id」屬性與「鏈接」開始......

function test(i) { 
    alert("You just clicked on link:" + this.id); 
} 
if (document.querySelectorAll('a[id^="link"]')) { 
    var elements = document.querySelectorAll('a[id^="link"]'); 
    var i = 0; 
    for (i = 0; i < elements.length; i += 1) { 
     elements[i].onclick = test; 
    } 
} else { 
    var elements = document.getElementsByTagName('a'); 
    var i = 0; 
    for (i = 0; i < elements.length; i += 1) { 
     if (elements[i].id.substr(0,4) === 'link') { 
      elements[i].onclick = test; 
     } 
    } 
} 

http://jsfiddle.net/Xvwme/3/