我想调用按钮等于数组索引

Question

我在html中有3个按钮（它们都有相同的类名）和长度为3的数组。所以我想在我单击第一个按钮时在第一个索引中调用数据。当我单击第二个按钮时，调用第二个索引中的数据。

这里是我的代码：

const infoBTN = document.getElementsByClassName('infoBTN')
const arr = [{name: 'Rawand'} , {name: 'Jack'} , {name: 'Max'}] ;

let num = 0;

const getInfo = function (){
  console.log(arr[num]); 
}

for(let i = 0 ; i<infoBTN.length ; i++){
  num = i;
  console.log('i = ' + i + ' And num = ' + num)
  infoBTN[i].addEventListener('click' , getInfo)
}

请请帮助我

Answer 1

声明getInfo函数inside循环，因此它可以关闭i索引：

const infoBTN = document.getElementsByClassName('infoBTN')
const arr = [{name: 'Rawand'} , {name: 'Jack'} , {name: 'Max'}] ;

for(let i = 0 ; i<infoBTN.length ; i++){
  infoBTN[i].addEventListener('click' , () => console.log(arr[i].name));
}

<button class="infoBTN">click</button>
<button class="infoBTN">click</button>
<button class="infoBTN">click</button>