알림 사용자가 클릭하는 링크의 ID

Question

각 고유 한 ID가있는 몇 개의 링크가 있습니다. 링크 중 하나가 클릭되면 사용자가 링크 ID를 알리는 알림을받는 단일 함수를 호출하려고합니다. 나는 곤두박질 친다. 여기에 내가 가진거야. 순수한 JavaScript로 이것을하고 싶습니다.

내 코드 :

<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> 

Answer 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

Answer 2

난 그냥 당신이 jQuery를 사용하는 예제를 만들어보십시오.

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 : 당신이 자바 스크립트 찾고있어 여기

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

Answer 3

: http://jsfiddle.net/Yynw9/

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

당신이 당신의 헤더에있는 라이브러리를 포함했다 jQuery를 사용하여 http://jsfiddle.net/3R4FA/1/을

코드 루프는 먼저 <a> 태그 인 모든 요소를 ​​선택합니다. 그런 다음이 배열을 반복하고 각 항목에 클릭 이벤트 리스너를 추가합니다. this 키워드를 사용하면 이벤트를 트리거 한 요소에 액세스 한 다음 ID를 가져올 수 있습니다.

Answer 4

을 지원하는 브라우저에서는 querySelectorAll을 사용하여 'link'로 시작하는 모든 ID를 가져올 수 있습니다. 또는 기존 브라우저에서 getElementsByClassName ..을 사용하여 클래스를 추가 할 수 있지만 해결책은 깨끗하지 않지만 ...

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/