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

Posted 2023-02-16

【中文标题】单击按钮时尝试使用 indexOf 查找数组的索引值

【英文标题】：Trying to use indexOf to find index value of the array when the buttons are clicked

【发布时间】：2017-03-26 09:08:06

【问题描述】：

我将 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，但它的工作方式似乎并不完全相同。

【问题讨论】：

我可以通过使用 currentTarget 属性来完成这项工作。 console.log(navBtnArray.indexOf(e.currentTarget) + "这是按钮数组索引");

【参考方案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);

【讨论】：

您可能需要考虑使用e.currentTarget 而不是target，以防按钮有子级。您还可以使用 btn.mouseChildren=false 关闭鼠标子级。

是的，确实如此。虽然，我认为这是一个具体情况，具体取决于图形是如何完成的，因为有时我会从使用e.currentTarget 的形状孩子那里得到奇怪的回报。

【参考方案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>

【讨论】：

这看起来像是一种纯 javascript 方法。我正在使用 Animate 平台，并在那里使用 Animate 内部的 create js/easelJS 框架。我找到了这篇文章，但似乎没有解决我的问题：createjs.com/docs/easeljs/classes/…