Question

我正在学习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。我在这里缺少什么？

Answer 1

执行点击监听器时，pos的值为3，您的代码没问题，请看这个例子：

＆＃13;

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;

Answer 2

尝试此操作以获得所需的结果

＆＃13;

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;

Answer 3

在单击按钮时，您可以运行日志pos，而不是在添加事件侦听器时。要解决此问题，您可以使用以下代码：

＆＃13;

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。

为什么这个javascript代码不能按预期工作？

3 个答案: