javascript - js无法获取数组内某个元素的下标？

问题描述

问 题

现页面上有四个不相领的元素，我分别获取，并将该四个元素放入一个数组内，点击其中的某个元素时，获取它在这个数组内的下标。控制台上一直输出undefined，代码如下：
var dom1=document.getElementById("node1");
var dom2=document.getElementById("node2");
var dom3=document.getElementById("node3");
var dom4=document.getElementById("node4");

var domArr=[dom1,dom2,dom3,dom4];
console.log(domArr);//打印正常
for(var i=0,len=domArr.length;i<len;i++){

domArr[i].onclick=function(){
    console.log(this.index);//undefined
    console.log(domArr[i]);//undefined
    console.log(this)//正常打印domArr[i]
}

}
感觉自己瞬间掉坑里去了，是因为我声明的数组不能直接修改元素而使得无法获取domeArr[i]还是因为其他原因？求指教（难道是因为这四个节点是js创建的，所以无法获取到？可是这四个节点是页面上有的啊，我只是获取到了并将它放入一个自定义的数组内了啊，再说了，console.log(this)是能够正常输出的）

解决方案

你设个断点就知道为什么了，在循环中是不会走onclick的function的，而在点击触发时i一直是4，所以返回undefined。

var dom1=document.getElementById("node1");
var dom2=document.getElementById("node2");
var dom3=document.getElementById("node3");
var dom4=document.getElementById("node4");

var domArr=[dom1,dom2,dom3,dom4];
console.log(domArr);//打印正常
for(var i=0,len=domArr.length;i<len;i++){
    (function(i){
        domArr[i].onclick=function(){
            console.log(this.index);//undefined
            console.log(domArr[i]);//undefined
            console.log(this)//正常打印domArr[i]
        }
    })(i)
}

这么改就行了

这篇关于javascript - js无法获取数组内某个元素的下标？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！