javascript - 单击按钮时尝试使用 indexOf 查找数组的索引值

Question

我将 Adob​​e Animate CC 用于画布项目。我有一个数组，我分配了事件侦听器，如下所示：

for(var i = 0; i < navBtnArray.length; i++ ){
navBtnArray[i].addEventListener("click", navigationControls);
}

我想弄清楚的是如何捕获在数组中单击的按钮的索引值。我试过这样：

function navigationControls(e){

console.log(navBtnArray.indexOf(this));
}

但这一直返回-1。这又是 Animate CC，所以我无法访问 jQuery。Animate 使用 CreateJS 和 EaselJS 库。我曾经在 AS3 中使用 indexOf，但它的工作方式似乎并不完全相同。

Answer 1

为此，您可以使用：

function navigationControls(e){
    console.log(navBtnArray.indexOf(e.target));
}

如果这仍然不起作用并且indexOf无法比较此类对象，您可以尝试向按钮对象添加一个额外的属性，例如：

for(var i = 0; i < navBtnArray.length; i++ ){
     navBtnArray[i].addEventListener("click", navigationControls);
     navBtnArray[i].index = i;
}

然后做：

function navigationControls(e){
    console.log(e.target.index);
}

Answer 2

尝试这个：

 var navBtnArray = document.getElementsByClassName('demo');
for(var i = 0; i < navBtnArray.length; i++ ){
(function(index){
      navBtnArray[i].onclick = function(){
              console.log(index)  ;
        }    
    })(i);

}

<button class="demo">hi</button>
<button class="demo">hi</button>
<button class="demo">hi</button>
<button class="demo">hi</button>
<button class="demo">hi</button>