如何从数组内指定对象取值？实现按钮与数组对象关联

你的核心问题是当前代码在点击按钮时会遍历所有信息对象，导致每次点击都只显示最后一个人的信息，而没有将按钮与对应的信息对象关联起来。以下是两种可行的解决方法：

方法一：利用索引关联（简单直接，适用于顺序一致的情况） #

由于你的姓名按钮顺序和 infos 数组的顺序完全匹配，可以通过索引直接绑定对应的信息对象：

const app = document.querySelector('.app')
const names = Array.from(document.querySelectorAll('.names div'));
const activeName = document.querySelector('.current-name')

const infos = [
  {
    fullName: 'Yassir Lasfar',
    age: 17,
    favSong: 'Way Down We Go'
  },
  {
    fullName: 'Imane Lasfar',
    age: 10,
    favSong: 'Mamamia'
  },
  {
    fullName: 'Khalil Belajmia',
    age: 18,
    favSong: 'Half A Man'
  }
]

// 使用forEach遍历按钮，同时获取索引
names.forEach((nameBtn, index) => {
  nameBtn.addEventListener('click', () => {
    // 通过索引获取对应的信息对象
    const selectedInfo = infos[index];
    activeName.innerHTML = `
      <div class="full-name">Name: ${selectedInfo.fullName}</div>
      <div class="active-age">Age : ${selectedInfo.age}</div>
      <div class="favourite-song">Favourite song : ${selectedInfo.favSong}</div>
    `;
  });
});

这种方法无需修改HTML，代码简洁，但依赖于按钮顺序和数组顺序的一致性。

方法二：使用数据属性（更健壮，不受顺序影响） #

如果担心后续按钮顺序或数组顺序可能变化，可以给每个按钮添加一个数据属性，存储对应的完整姓名，再通过匹配完整姓名找到对应的信息对象：

修改HTML部分： #

<div class="app">
  <div class="names">
    <div class="yassir" data-fullname="Yassir Lasfar">Yassir</div>
    <div class="imane" data-fullname="Imane Lasfar">Imane</div>
    <div class="khalil" data-fullname="Khalil Belajmia">khalil</div>
  </div>
  <div class="current-name">
    <div class="full-name">Name: Yassir Lasfar</div>
    <div class="active-age">Age : 17</div>
    <div class="favourite-song">Favourite song : way down we go</div>
  </div>
</div>

修改JavaScript部分： #

const app = document.querySelector('.app')
const names = Array.from(document.querySelectorAll('.names div'));
const activeName = document.querySelector('.current-name')

const infos = [
  {
    fullName: 'Yassir Lasfar',
    age: 17,
    favSong: 'Way Down We Go'
  },
  {
    fullName: 'Imane Lasfar',
    age: 10,
    favSong: 'Mamamia'
  },
  {
    fullName: 'Khalil Belajmia',
    age: 18,
    favSong: 'Half A Man'
  }
]

names.forEach(nameBtn => {
  nameBtn.addEventListener('click', () => {
    // 获取按钮上存储的完整姓名
    const targetFullName = nameBtn.dataset.fullname;
    // 在infos数组中找到匹配的信息对象
    const selectedInfo = infos.find(info => info.fullName === targetFullName);
    
    if (selectedInfo) {
      activeName.innerHTML = `
        <div class="full-name">Name: ${selectedInfo.fullName}</div>
        <div class="active-age">Age : ${selectedInfo.age}</div>
        <div class="favourite-song">Favourite song : ${selectedInfo.favSong}</div>
      `;
    }
  });
});

这种方法不依赖顺序，更灵活，即使后续调整按钮位置或数组排序，功能依然正常。

内容的提问来源于stack exchange，提问作者Yasir Lasfar