javascript - 提醒用户点击的链接的 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 );
}

演示

Answer 2

我刚刚使用 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" />

Answer 3

这是您要查找的 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>标签元素。然后它遍历这个数组，并为每个项目添加一个单击事件侦听器。使用this关键字访问触发事件的元素，然后可以获取id。

Answer 4

在支持它的浏览器中，您可以使用 querySelectorAll 来获取所有以“链接”开头的 id，或者您可以添加一个类并使用 getElementsByClassName.. 在旧版浏览器中，解决方案不是那么干净，但您可以获取所有文档中或元素内部的“a”标签，并检查“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/