我正在学习javascript语言,所以当我遇到这个问题时,我正处于一个项目中。这是代码。
function koko() {
items = document.getElementsByTagName("a");
for (var pos = 0; pos < items.length; pos++) {
this.items[pos].addEventListener("click", function() {
console.log(pos);
});
}
}
koko();
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<a href="#">Click me 1</a>
<a href="#">Click me 2</a>
<a href="#">Click me 3</a>
</body>
</html>
每次点击a
标记的任何项目时,我都会在控制台items.length
上获得相同的值。但我希望它能打印出被点击的元素的位置/索引。例如,如果我点击Click me 2
,则应打印1
。我在这里缺少什么?
答案 0 :(得分:0)
执行点击监听器时,pos
的值为3,您的代码没问题,请看这个例子:
function koko() {
items = document.getElementsByTagName("a");
for (var pos = 0; pos < items.length; pos++) {
this.items[pos].addEventListener("click", function() {
console.log(this.innerHTML);
});
}
}
koko();
&#13;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<a href="#">Click me 1</a>
<a href="#">Click me 2</a>
<a href="#">Click me 3</a>
</body>
</html>
&#13;
答案 1 :(得分:0)
尝试此操作以获得所需的结果
function koko() {
items = document.getElementsByTagName("a");
for (var pos = 0; pos < items.length; pos++) {
this.items[pos].id = pos;
this.items[pos].addEventListener("click", function() {
console.log(this.id);
});
}
}
koko();
&#13;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<a href="#">Click me 1</a>
<a href="#">Click me 2</a>
<a href="#">Click me 3</a>
</body>
</html>
&#13;
答案 2 :(得分:0)
在单击按钮时,您可以运行日志pos
,而不是在添加事件侦听器时。要解决此问题,您可以使用以下代码:
function koko() {
items = document.getElementsByTagName("a");
for (var pos = 0; pos < items.length; pos++) {
this.items[pos].addEventListener("click", function() {console.log(this.id);});
}
}
koko();
&#13;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<a href="#" id="1">Click me 1</a>
<a href="#" id="2">Click me 2</a>
<a href="#" id="3">Click me 3</a>
</body>
</html>
&#13;
它从原始代码所做的更改:
为每个链接添加了id
。其中的数字写入屏幕。
更改了Javascript以编写链接的id
。