Question

假设我有以下代码：

<body>
  <a>1</a>
  <a>2</a>
</body>
<script>
var as = document.getElementByTagName('a');
for(var i=1; i<=as.length; i++) {
  as[i].onclick = function(){
    alert(i);
  }
}
</script>

当我点击任何a标签时，它会提醒2！我知道为什么，但我怎么通过呢？

Answer 1

需要添加一些闭包来保存i的值，因为在完成循环并且i的值已经改变之后将调用onclick函数

as[i].onclick = (function(i2){
    return function(){
        alert(i2);
    };
})(i);

Answer 2

这是一个范围问题。在注册任何点击之前，您的for循环已完成，因此i始终为2。您可以通过使用功能forEach循环来避免这种情况，该循环将保留您的范围：

var as = document.getElementsByTagName('a');
[].forEach.call(as, function (el, i) {
  el.onclick = function(){
    alert(i);
  }
})

Answer 3

This会在html中为您提供当前的标记位置，您可以使用以下代码：

$('a').on('click',function(){
console.log($(this).index());
});

如何在不改变DOM的情况下在javascript中获取标记位置

3 个答案: